Developer-Friendly Tailwind General Components

Card With Action on Top

View

<js-component src="general/card_with_action_on_top"></js-component>

Custom Color Card

View

<js-component src="general/custom_color_card"></js-component>

Dark Card With Buttons

View

<js-component src="application/dark_card_with_buttons"></js-component>

Responsive Card

View

<js-component src="general/responsive_card"></js-component>

Weather Report Card

View

<div class="flex w-full">
  <div class="w-full bg-gray-800 p-8 text-white lg:my-3 lg:rounded-lg">
    <div class="mb-4 flex w-64 w-full justify-between">
      <div class="text-90 w-auto font-bold uppercase">Precipitation</div>
      <div class="w-auto text-right">10 %</div>
    </div>
    <div class="mb-4 flex w-64 w-full justify-between">
      <div class="text-90 w-auto font-bold uppercase">Humidity</div>
      <div class="w-auto text-right">29 %</div>
    </div>
    <div class="mb-8 flex w-64 w-full justify-between">
      <div class="text-90 w-auto font-bold uppercase">Wind</div>
      <div class="w-auto text-right">12 Mph</div>
    </div>
    <div class="flex flex-row">
      <div class="flex w-1/4 flex-col rounded-lg bg-gray-100 pb-4 text-black">
        <div class="mb-2 pt-2 text-center">
          <i class="fa-solid fa-sun mx-auto w-10 text-white"></i>
        </div>
        <div class="text-center">
          <b class="font-normal">Tue</b><br />
          <strong class="text-xl">29ºC</strong>
        </div>
      </div>

<js-component src="general/weather_report_card"></js-component>

Date and Weather Card

View

<js-component src="general/date_and_weather_card"></js-component>

Horizontal Card

View

<js-component src="general/horizontal_card"></js-component>

Pill Navigation Bar

View

<nav class="mx-auto w-full px-4 lg:max-w-screen-2xl lg:px-10" x-data="{ isOpen: true }">
  <div class="flex list-none items-center justify-between rounded-full border border-slate-700/40 bg-slate-700/20 p-4 font-sans font-medium">
    
    <div class="p-1">
      <a href="/" class="relative z-10 flex w-auto select-none items-center text-2xl font-extrabold leading-none text-black">jamstackers.</a>
    </div>

<ul class="hidden w-full items-center justify-end md:flex">
      <li>
        <a href="/" class="mx-2 cursor-pointer transition-colors duration-300 ease-in-out hover:text-white">Home</a>
      </li>
      <li>
        <a href="/about" class="mx-2 cursor-pointer transition-colors duration-300 ease-in-out hover:text-white">About</a>
      </li>
    </ul>

<form class="hidden items-center space-x-2 sm:flex">
      <input class="form-control rounded border border-gray-400 px-2 py-1" type="text" placeholder="Search" />
      <button class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700" type="submit">Go</button>
    </form>

<button @click="isOpen = !isOpen" class="rounded px-3 py-1 text-white hover:fill-slate-700 md:hidden" type="button">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" x-show="!isOpen" x-cloak class="h-6 w-6">
        <path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z" />
      </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" x-show="isOpen" x-cloak class="h-6 w-6">
        <path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" />
      </svg>
    </button>
  </div>
</nav>

<js-component src="general/pill_navigation_bar"></js-component>

Side Bar Menu

View

<div x-data="{ isOpen: true }" class="relative">
  
  <div class="fixed inset-y-0 left-0 z-20 w-64 transform bg-gray-800 text-white transition-transform duration-300" :class="{ '-translate-x-full': !isOpen, 'translate-x-0': isOpen }">
    <div class="flex items-center justify-between border-b border-gray-700 p-4">
      <span class="text-xl font-bold">Menu</span>
      <button @click="isOpen = false" class="text-gray-300 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="h-6 w-6">
          <path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6 9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" />
        </svg>
      </button>
    </div>
    <ul class="space-y-2 p-4">
      <li><a href="#" class="block rounded p-2 hover:bg-gray-700">Home</a></li>
      <li><a href="#" class="block rounded p-2 hover:bg-gray-700">About</a></li>
      <li><a href="#" class="block rounded p-2 hover:bg-gray-700">Contact</a></li>
    </ul>
  </div>

<div x-show="isOpen" @click="isOpen = false" x-cloak class="fixed inset-0 z-10 bg-black bg-opacity-50"></div>
</div>

<js-component src="general/side_bar_menu"></js-component>

Sizes Select

View

<form class="mx-auto max-w-sm">
  <label for="small" class="mb-2 block text-sm font-medium text-gray-900">Small select</label>
  <select id="small" class="mb-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500">
    <option selected>Choose a country</option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
  </select>
  <label for="default" class="mb-2 block text-sm font-medium text-gray-900">Default select</label>
  <select id="default" class="mb-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500">
    <option selected>Choose a country</option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
  </select>
  <label for="large" class="mb-2 block text-base font-medium text-gray-900">Large select</label>
  <select id="large" class="block w-full rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900 focus:border-blue-500 focus:ring-blue-500">
    <option selected>Choose a country</option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
  </select>
</form>

<js-component src="general/size_select"></js-component>