On this site, I share a growing collection of Tailwind CSS components that I create for my side projects.
It is in a very early stage. Both the site and the components on it are going to change a lot. You are welcome to explore and use everything you see already.
If you have any feedback or suggestions, please hit me up on Twitter. Thanks!
– Dom
<button class="bg-blue-600 border border-transparent font-medium text-white px-3.5 py-2 rounded-md shadow-sm text-sm whitespace-nowrap disabled:bg-gray-300 disabled:shadow-none disabled:text-gray-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"> Button </button>
<input class="border-gray-300 cursor-pointer block h-6 m-0 rounded text-indigo-500 w-6 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-offset-transparent focus:ring-opacity-50" type="checkbox" />
<div class="flex items-center"> <input class="border-gray-300 cursor-pointer block h-6 m-0 rounded text-indigo-500 w-6 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-offset-transparent focus:ring-opacity-50" type="checkbox" id="consent" /> <label class="block font-medium text-gray-700 text-sm dark:text-gray-200" for="consent" > I accept the Terms and Conditions. </label> </div>
<input class="appearance-none bg-white border border-gray-300 rounded-md shadow-sm text-gray-600 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-300 px-3 py-2 text-base" placeholder="Placeholder" type="text" />
<div> <label class="block font-medium text-gray-700 text-sm dark:text-gray-200" for="name" > Name </label> <input class="appearance-none bg-white border border-gray-300 rounded-md shadow-sm text-gray-600 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-300 px-3 py-2 text-base" id="name" placeholder="Placeholder" type="text" /> </div>
<input class="appearance-none bg-white border border-gray-300 rounded-md shadow-sm text-gray-600 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-300 px-2.5 py-2 text-sm" placeholder="Placeholder" type="text" />
<div class="flex rounded-md shadow-sm"> <span class="bg-gray-50 border border-gray-300 border-r-0 inline-flex items-center px-3 rounded-l-md text-gray-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"> https:// </span> <input class="appearance-none bg-white border border-gray-300 px-3 py-2 rounded-l-none rounded-r-md text-base text-gray-700 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-200" placeholder="www.example.com" type="text" /> </div>
<div> <label class="block font-medium text-gray-700 text-sm dark:text-gray-200"> Website </label> <div class="flex rounded-md shadow-sm"> <span class="bg-gray-50 border border-gray-300 border-r-0 inline-flex items-center px-3 rounded-l-md text-gray-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"> https:// </span> <input class="appearance-none bg-white border border-gray-300 px-3 py-2 rounded-l-none rounded-r-md text-base text-gray-700 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-200" placeholder="www.example.com" type="text" /> </div> </div>
This is a card.
<div class="bg-white overflow-hidden rounded shadow-sm text-gray-600 w-full dark:bg-black dark:text-gray-300"> <p class="px-4 py-3"> This is a card. </p> </div>
Beautiful, spacious rooms with an ocean view. Rates from $109/night.
<div class="bg-white overflow-hidden rounded shadow-sm text-gray-600 w-full dark:bg-black dark:text-gray-300"> <img alt="An island resort" src="/hero-pool.jpg" /> <div class="px-4 py-3"> <h1 class="font-bold leading-snug mb-1.5 text-base text-gray-700 dark:text-gray-200"> Peninsula Resort and Spa </h1> <p class="mb-6 text-sm"> Beautiful, spacious rooms with an ocean view. Rates from $109/night. </p> <button class="bg-blue-600 border border-transparent font-medium text-white px-3.5 py-2 rounded-md shadow-sm text-sm whitespace-nowrap disabled:bg-gray-300 disabled:shadow-none disabled:text-gray-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"> Book now </button> </div> </div>
<div class="flex items-center space-x-2.5"> <img class="border-2 border-white h-10 w-10 rounded-full" src="/dom.jpg" /> <div class="flex flex-col text-xs space-y-0.5"> <span class="text-gray-600 dark:text-gray-300 font-bold"> Dom Habersack </span> <span class="text-gray-500 dark:text-gray-400"> Content Creator & Indie Hacker </span> </div> </div>
<a class="bg-gray-200 inline-block px-2 py-1.5 rounded text-gray-600 text-xs whitespace-nowrap visited:text-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:visited:text-gray-300" href="https://domhabersack/firetips/tags/javascript" > JavaScript </a>
<label class="bg-gray-300 cursor-pointer h-6 inline-block relative rounded-full w-10 dark:bg-gray-700"> <input class="hidden" type="checkbox" /> <div class="absolute bg-white h-5 rounded-full shadow-md top-0.5 w-5 left-0.5"> <span class="sr-only"> Toggle </span> </div> </label>
Check out our Black Friday Sale!
<div class="bg-amber-300 flex justify-center px-4 py-3 text-gray-800 w-full"> <p> Check out our Black Friday Sale! </p> </div>