tailwind-ai/application_ui/lists/grid_lists/simple_cards.html

<div>
    <h2 class="text-sm font-medium text-gray-500">Pinned Projects</h2>
    <ul
        role="list"
        class="mt-3 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4"
    >
        <li class="col-span-1 flex rounded-md shadow-xs">
            <div
                class="flex w-16 shrink-0 items-center justify-center rounded-l-md bg-pink-600 text-sm font-medium text-white"
            >
                GA
            </div>
            <div
                class="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-gray-200 bg-white"
            >
                <div class="flex-1 truncate px-4 py-2 text-sm">
                    <a
                        href="#"
                        class="font-medium text-gray-900 hover:text-gray-600"
                        >Graph API</a
                    >
                    <p class="text-gray-500">16 Members</p>
                </div>
                <div class="shrink-0 pr-2">
                    <button
                        type="button"
                        class="inline-flex size-8 items-center justify-center rounded-full bg-transparent bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
                    >
                        <span class="sr-only">Open options</span>
                        <svg
                            viewBox="0 0 20 20"
                            fill="currentColor"
                            data-slot="icon"
                            aria-hidden="true"
                            class="size-5"
                        >
                            <path
                                d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
                            />
                        </svg>
                    </button>
                </div>
            </div>
        </li>
        <li class="col-span-1 flex rounded-md shadow-xs">
            <div
                class="flex w-16 shrink-0 items-center justify-center rounded-l-md bg-purple-600 text-sm font-medium text-white"
            >
                CD
            </div>
            <div
                class="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-gray-200 bg-white"
            >
                <div class="flex-1 truncate px-4 py-2 text-sm">
                    <a
                        href="#"
                        class="font-medium text-gray-900 hover:text-gray-600"
                        >Component Design</a
                    >
                    <p class="text-gray-500">12 Members</p>
                </div>
                <div class="shrink-0 pr-2">
                    <button
                        type="button"
                        class="inline-flex size-8 items-center justify-center rounded-full bg-transparent bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
                    >
                        <span class="sr-only">Open options</span>
                        <svg
                            viewBox="0 0 20 20"
                            fill="currentColor"
                            data-slot="icon"
                            aria-hidden="true"
                            class="size-5"
                        >
                            <path
                                d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
                            />
                        </svg>
                    </button>
                </div>
            </div>
        </li>
        <li class="col-span-1 flex rounded-md shadow-xs">
            <div
                class="flex w-16 shrink-0 items-center justify-center rounded-l-md bg-yellow-500 text-sm font-medium text-white"
            >
                T
            </div>
            <div
                class="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-gray-200 bg-white"
            >
                <div class="flex-1 truncate px-4 py-2 text-sm">
                    <a
                        href="#"
                        class="font-medium text-gray-900 hover:text-gray-600"
                        >Templates</a
                    >
                    <p class="text-gray-500">16 Members</p>
                </div>
                <div class="shrink-0 pr-2">
                    <button
                        type="button"
                        class="inline-flex size-8 items-center justify-center rounded-full bg-transparent bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
                    >
                        <span class="sr-only">Open options</span>
                        <svg
                            viewBox="0 0 20 20"
                            fill="currentColor"
                            data-slot="icon"
                            aria-hidden="true"
                            class="size-5"
                        >
                            <path
                                d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
                            />
                        </svg>
                    </button>
                </div>
            </div>
        </li>
        <li class="col-span-1 flex rounded-md shadow-xs">
            <div
                class="flex w-16 shrink-0 items-center justify-center rounded-l-md bg-green-500 text-sm font-medium text-white"
            >
                RC
            </div>
            <div
                class="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-gray-200 bg-white"
            >
                <div class="flex-1 truncate px-4 py-2 text-sm">
                    <a
                        href="#"
                        class="font-medium text-gray-900 hover:text-gray-600"
                        >React Components</a
                    >
                    <p class="text-gray-500">8 Members</p>
                </div>
                <div class="shrink-0 pr-2">
                    <button
                        type="button"
                        class="inline-flex size-8 items-center justify-center rounded-full bg-transparent bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
                    >
                        <span class="sr-only">Open options</span>
                        <svg
                            viewBox="0 0 20 20"
                            fill="currentColor"
                            data-slot="icon"
                            aria-hidden="true"
                            class="size-5"
                        >
                            <path
                                d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
                            />
                        </svg>
                    </button>
                </div>
            </div>
        </li>
    </ul>
</div>