UI Components in Trizzle library

Tailwind Component #121

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="relative pt-16 pb-10 px-8 bg-blue-500 rounded-2xl overflow-hidden">
      <img class="absolute top-0 left-0 h-full w-full object-cover" src="trizzle-assets/images/banner-triangle-squere-small.png" alt="">
      <div class="relative">
        <h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Ideal banner asset for your dashboard project</h3>
        <p class="font-medium text-blue-200 mb-36">Go global with our UI Resources and solutions</p>
        <a class="inline-block w-full px-6 py-3 leading-6 text-center font-semibold text-blue-50 bg-gray-500 hover:bg-gray-600 transition duration-200 rounded-lg" href="#">Get Started</a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #122

Tailwind CSS

Trizzle

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-red-500 rounded-lg">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 12C9.75278 12 9.5111 12.0733 9.30554 12.2107C9.09998 12.348 8.93976 12.5432 8.84516 12.7716C8.75055 13.0001 8.72579 13.2514 8.77402 13.4939C8.82225 13.7363 8.94131 13.9591 9.11612 14.1339C9.29094 14.3087 9.51367 14.4277 9.75614 14.476C9.99862 14.5242 10.25 14.4995 10.4784 14.4049C10.7068 14.3102 10.902 14.15 11.0393 13.9445C11.1767 13.7389 11.25 13.4972 11.25 13.25C11.25 12.9185 11.1183 12.6005 10.8839 12.3661C10.6495 12.1317 10.3315 12 10 12ZM10 10.5C10.2652 10.5 10.5196 10.3946 10.7071 10.2071C10.8946 10.0196 11 9.76522 11 9.5V6.5C11 6.23478 10.8946 5.98043 10.7071 5.79289C10.5196 5.60536 10.2652 5.5 10 5.5C9.73479 5.5 9.48043 5.60536 9.2929 5.79289C9.10536 5.98043 9 6.23478 9 6.5V9.5C9 9.76522 9.10536 10.0196 9.2929 10.2071C9.48043 10.3946 9.73479 10.5 10 10.5ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34874 18.9425 4.80691 17.0678 2.93219C15.1931 1.05746 12.6513 0.00294858 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C17.9976 12.121 17.1539 14.1544 15.6542 15.6542C14.1544 17.1539 12.121 17.9976 10 18Z" fill="#7A0C2E"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-red-900 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="#212B36"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Tailwind Component #123

Tailwind CSS

Trizzle

<section class="relative pt-24 lg:py-44">
  <img class="hidden lg:block absolute top-0 right-0 h-full w-1/2" src="trizzle-assets/images/placeholder-laptop-dark-light.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="lg:w-1/2">
      <div class="relative max-w-xs lg:max-w-md mx-auto text-center">
        <a class="inline-block mx-auto mb-10" href="#">
          <img class="block" src="trizzle-assets/logos/trizzle-logo-blue.svg" alt="">
        </a>
      </div>
      <div class="relative max-w-md mx-auto">
        <div class="text-center mb-10">
          <h2 class="text-2xl text-gray-100 font-semibold mb-2">Sign up with new account</h2>
          <p class="text-gray-300 font-medium">Start your journey with us</p>
        </div>
        <form action="">
          <div class="relative w-full h-14 py-4 px-3 mb-6 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-600">Email</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput5-1" type="email">
          </div>
          <button class="block w-full py-4 mb-6 leading-6 text-white font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Sign Up</button>
          <div class="flex items-center mb-6">
            <div class="pt-px w-full bg-gray-400"></div>
            <span class="px-4 text-xs text-gray-300">OR</span>
            <div class="pt-px w-full bg-gray-400"></div>
          </div>
          <a class="flex items-center justify-center w-full py-4 mb-4 leading-6 text-white font-semibold bg-gray-500 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
            <div class="w-4 bg-white rounded-sm">
              <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.5 0H14L8 4.738L2 0H1.5C0.672 0 0 0.672 0 1.5V10.5C0 11.328 0.672 12 1.5 12H2V2.646L8 7.261L14 2.645V12H14.5C15.328 12 16 11.328 16 10.5V1.5C16 0.672 15.328 0 14.5 0Z" fill="#F44336"></path>
              </svg>
            </div>
            <span class="ml-3">Sign In with Gmail</span>
          </a>
          <a class="flex items-center justify-center w-full py-4 mb-4 leading-6 text-white font-semibold bg-gray-500 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
            <div class="w-4">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.8438 0H2.15603C0.965312 0 0 0.965273 0 2.15603V13.8439C0 15.0346 0.965273 15.9999 2.15603 15.9999H7.92039L7.93021 10.2824H6.44481C6.25177 10.2824 6.09509 10.1263 6.09435 9.93329L6.08722 8.0903C6.08648 7.8962 6.24363 7.73847 6.43772 7.73847H7.92043V5.95767C7.92043 3.89107 9.18258 2.7658 11.0261 2.7658H12.5389C12.7324 2.7658 12.8894 2.92271 12.8894 3.1163V4.67031C12.8894 4.86382 12.7325 5.0207 12.5391 5.02081L11.6107 5.02124C10.6081 5.02124 10.414 5.49766 10.414 6.19682V7.73851H12.617C12.8269 7.73851 12.9898 7.9218 12.965 8.13026L12.7466 9.97325C12.7257 10.1496 12.5761 10.2825 12.3986 10.2825H10.4238L10.414 16H13.8439C15.0346 16 15.9999 15.0347 15.9999 13.844V2.15603C15.9998 0.965273 15.0346 0 13.8438 0Z" fill="#475993"></path>
              </svg>
            </div>
            <span class="ml-3">Sign Up with Facebook</span>
          </a>
          <a class="flex items-center justify-center w-full py-4 mb-8 leading-6 text-white font-semibold bg-gray-500 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
            <div class="w-4">
              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_479_3561)">
                  <path d="M16.5 3.039C15.905 3.3 15.271 3.473 14.61 3.557C15.29 3.151 15.809 2.513 16.053 1.744C15.419 2.122 14.719 2.389 13.973 2.538C13.371 1.897 12.513 1.5 11.577 1.5C9.761 1.5 8.299 2.974 8.299 4.781C8.299 5.041 8.321 5.291 8.375 5.529C5.648 5.396 3.235 4.089 1.614 2.098C1.331 2.589 1.165 3.151 1.165 3.756C1.165 4.892 1.75 5.899 2.622 6.482C2.095 6.472 1.578 6.319 1.14 6.078C1.14 6.088 1.14 6.101 1.14 6.114C1.14 7.708 2.277 9.032 3.768 9.337C3.501 9.41 3.21 9.445 2.908 9.445C2.698 9.445 2.486 9.433 2.287 9.389C2.712 10.688 3.918 11.643 5.352 11.674C4.236 12.547 2.819 13.073 1.285 13.073C1.016 13.073 0.758 13.061 0.5 13.028C1.953 13.965 3.675 14.5 5.532 14.5C11.568 14.5 14.868 9.5 14.868 5.166C14.868 5.021 14.863 4.881 14.856 4.742C15.507 4.28 16.054 3.703 16.5 3.039Z" fill="#03A9F4"></path>
                </g>
                <defs><clipPath id="clip0_479_3561"><rect width="16" height="16" fill="white" transform="translate(0.5)"></rect></clipPath></defs>
              </svg>
            </div>
            <span class="ml-3">Sign Up with Twitter</span>
          </a>
          <p class="font-medium text-center">
            <span class="text-gray-300">Already have an acoount?</span>
            <a class="inline-block text-blue-500 hover:underline" href="#">Sign In</a>
          </p>
        </form>
      </div>
    </div>
  </div>
  <img class="lg:hidden mt-24" src="trizzle-assets/images/placeholder-laptop-dark-light.png" alt="">
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Tailwind Component #124

Tailwind CSS

Trizzle

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-6">
        <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
          <div class="h-full p-6 bg-gray-500 rounded-xl">
            <div class="flex items-center">
              <div class="flex flex-shrink-0 self-start w-12 h-12 mr-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.67188 14.3298C8.67188 15.6198 9.66188 16.6598 10.8919 16.6598H13.4019C14.4719 16.6598 15.3419 15.7498 15.3419 14.6298C15.3419 13.4098 14.8119 12.9798 14.0219 12.6998L9.99187 11.2998C9.20187 11.0198 8.67188 10.5898 8.67188 9.36984C8.67188 8.24984 9.54187 7.33984 10.6119 7.33984H13.1219C14.3519 7.33984 15.3419 8.37984 15.3419 9.66984" stroke="#194BFB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 6V18" stroke="#194BFB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#194BFB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h5 class="text-xs text-gray-300 leading-6 font-semibold">Monthly Payment</h5>
                <div class="flex items-end leading-none text-gray-100 font-semibold">
                  <span class="text-2xl">$65</span>
                  <span class="text-sm pb-1">/month</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="h-full p-6 bg-gray-500 rounded-xl">
            <div class="flex items-center">
              <div class="flex flex-shrink-0 self-start w-12 h-12 mr-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
                <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 9C9.20914 9 11 7.20914 11 5C11 2.79086 9.20914 1 7 1C4.79086 1 3 2.79086 3 5C3 7.20914 4.79086 9 7 9Z" stroke="#194BFB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1 19V17C1 15.9391 1.42143 14.9217 2.17157 14.1716C2.92172 13.4214 3.93913 13 5 13H9C10.0609 13 11.0783 13.4214 11.8284 14.1716C12.5786 14.9217 13 15.9391 13 17V19" stroke="#194BFB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h5 class="text-xs text-gray-300 leading-6 font-semibold">Total Clients</h5>
                <div class="flex items-center text-2xl leading-none text-gray-100 font-semibold">
                  <span>145</span>
                  <span class="inline-block ml-2 py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">+12,0%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="px-10 pt-6 pb-10 mb-6 bg-gray-500 rounded-xl">
        <div class="flex flex-wrap items-center justify-between -mx-4 mb-6">
          <div class="w-full sm:w-auto px-4 mb-2 sm:mb-0">
            <h4 class="text-lg text-gray-100 font-semibold">Payment methods</h4>
          </div>
          <div class="w-full sm:w-auto px-4">
            <a class="inline-flex items-center text-sm font-bold text-blue-500 hover:text-blue-400" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.667 7.33332H8.66699V3.33332C8.66699 3.15651 8.59675 2.98694 8.47173 2.86192C8.34671 2.73689 8.17714 2.66666 8.00033 2.66666C7.82351 2.66666 7.65395 2.73689 7.52892 2.86192C7.4039 2.98694 7.33366 3.15651 7.33366 3.33332V7.33332H3.33366C3.15685 7.33332 2.98728 7.40356 2.86225 7.52859C2.73723 7.65361 2.66699 7.82318 2.66699 7.99999C2.66699 8.1768 2.73723 8.34637 2.86225 8.47139C2.98728 8.59642 3.15685 8.66666 3.33366 8.66666H7.33366V12.6667C7.33366 12.8435 7.4039 13.013 7.52892 13.1381C7.65395 13.2631 7.82351 13.3333 8.00033 13.3333C8.17714 13.3333 8.34671 13.2631 8.47173 13.1381C8.59675 13.013 8.66699 12.8435 8.66699 12.6667V8.66666H12.667C12.8438 8.66666 13.0134 8.59642 13.1384 8.47139C13.2634 8.34637 13.3337 8.1768 13.3337 7.99999C13.3337 7.82318 13.2634 7.65361 13.1384 7.52859C13.0134 7.40356 12.8438 7.33332 12.667 7.33332Z" fill="currentColor"></path>
              </svg>
              <span class="ml-2">Add method</span>
            </a>
          </div>
        </div>
        <div class="pb-6 mb-6 border-b border-gray-400">
          <div class="flex flex-wrap items-center justify-between -mx-4 -mb-5">
            <div class="w-full sm:w-auto px-4 mb-5">
              <div class="flex items-center">
                <img class="h-12 w-17 mr-4 self-start" src="trizzle-assets/logos/visa-logo.svg" alt="">
                <div>
                  <h5 class="text-sm text-gray-100 leading-5 font-semibold">Visa ending in 3456</h5>
                  <span class="text-xs text-gray-300 font-medium">Expires 04/2028</span>
                </div>
              </div>
            </div>
            <div class="w-full sm:w-auto px-4 mb-5"><a class="inline-block ml-auto px-2 py-1 text-xs leading-6 text-gray-200 font-bold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-100" href="#">Default</a></div>
          </div>
        </div>
        <div>
          <div class="flex items-center">
            <img class="h-12 w-17 mr-4 self-start" src="trizzle-assets/logos/card-logo.svg" alt="">
            <div>
              <h5 class="text-sm text-gray-100 leading-5 font-semibold">Visa ending in 3456</h5>
              <span class="text-xs text-gray-300 font-medium">Expires 04/2028</span>
            </div>
          </div>
        </div>
      </div>
      <div class="p-6 mb-10 bg-gray-500 rounded-xl">
        <h4 class="text-lg text-gray-100 font-semibold mb-6">Invoices</h4>
        <div class="w-full mt-6 pb-4 overflow-x-scroll">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="p-0">
                  <div class="py-3 px-6 rounded-l-xl bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">INVOICE ID</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">AMOUNT</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="py-3 px-6 bg-gray-600">
                    <button class="inline-flex items-center text-xs text-gray-300 font-semibold">
                      <span class="mr-2">DATE</span>
                      <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.8598 8.52669L4.9998 11.3934L2.1398 8.52669C2.01426 8.40115 1.844 8.33063 1.66646 8.33063C1.48893 8.33063 1.31867 8.40115 1.19313 8.52669C1.0676 8.65222 0.99707 8.82249 0.99707 9.00002C0.99707 9.17756 1.0676 9.34782 1.19313 9.47335L4.52646 12.8067C4.58844 12.8692 4.66217 12.9188 4.74341 12.9526C4.82465 12.9865 4.91179 13.0039 4.9998 13.0039C5.08781 13.0039 5.17494 12.9865 5.25618 12.9526C5.33742 12.9188 5.41116 12.8692 5.47313 12.8067L8.80646 9.47335C8.86862 9.41119 8.91793 9.3374 8.95157 9.25619C8.98521 9.17497 9.00252 9.08793 9.00252 9.00002C9.00252 8.91211 8.98521 8.82507 8.95157 8.74385C8.91793 8.66264 8.86862 8.58885 8.80646 8.52669C8.7443 8.46453 8.67051 8.41522 8.5893 8.38158C8.50808 8.34794 8.42104 8.33063 8.33313 8.33063C8.24522 8.33063 8.15818 8.34794 8.07696 8.38158C7.99575 8.41522 7.92196 8.46453 7.8598 8.52669ZM2.1398 5.47335L4.9998 2.60669L7.8598 5.47335C7.92177 5.53584 7.99551 5.58544 8.07675 5.61928C8.15799 5.65313 8.24512 5.67055 8.33313 5.67055C8.42114 5.67055 8.50828 5.65313 8.58952 5.61928C8.67075 5.58544 8.74449 5.53584 8.80646 5.47335C8.86895 5.41138 8.91855 5.33764 8.95239 5.2564C8.98624 5.17517 9.00366 5.08803 9.00366 5.00002C9.00366 4.91201 8.98624 4.82488 8.95239 4.74364C8.91855 4.6624 8.86895 4.58866 8.80646 4.52669L5.47313 1.19335C5.41116 1.13087 5.33742 1.08127 5.25618 1.04743C5.17494 1.01358 5.08781 0.996155 4.9998 0.996155C4.91179 0.996155 4.82465 1.01358 4.74341 1.04743C4.66217 1.08127 4.58844 1.13087 4.52646 1.19335L1.19313 4.52669C1.0676 4.65222 0.99707 4.82249 0.99707 5.00002C0.99707 5.17756 1.0676 5.34782 1.19313 5.47335C1.31867 5.59889 1.48893 5.66941 1.66646 5.66941C1.844 5.66941 2.01426 5.59889 2.1398 5.47335Z" fill="currentColor"></path>
                      </svg>
                    </button>
                  </div>
                </th>
                <th class="p-0">
                  <div class="py-3 px-5 rounded-r-xl bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">STATUS</span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <h5 class="text-sm font-medium text-gray-100">INVOICE #3405</h5>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <span class="text-sm font-medium text-gray-100">$25.00</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <div class="flex h-full items-center">
                      <span class="inline-block w-2 h-2 mr-1 bg-yellow-500 rounded-full"></span>
                      <span class="text-sm font-medium text-gray-100">Pending</span>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="p-0">
                  <div class="h-16 p-6 rounded-l-xl bg-gray-600">
                    <h5 class="text-sm font-medium text-gray-100">INVOICE #3405</h5>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6 bg-gray-600">
                    <span class="text-sm font-medium text-gray-100">$25.00</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6 bg-gray-600">
                    <h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex h-16 p-6 items-center rounded-r-xl bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Delivered</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <h5 class="text-sm font-medium text-gray-100">INVOICE #3405</h5>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <span class="text-sm font-medium text-gray-100">$25.00</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <div class="flex h-full items-center">
                      <span class="inline-block w-2 h-2 mr-1 bg-yellow-500 rounded-full"></span>
                      <span class="text-sm font-medium text-gray-100">Pending</span>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="p-0">
                  <div class="h-16 p-6 rounded-l-xl bg-gray-600">
                    <h5 class="text-sm font-medium text-gray-100">INVOICE #3405</h5>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6 bg-gray-600">
                    <span class="text-sm font-medium text-gray-100">$25.00</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6 bg-gray-600">
                    <h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex h-16 p-6 items-center rounded-r-xl bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-red-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Refunded</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <h5 class="text-sm font-medium text-gray-100">INVOICE #3405</h5>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <span class="text-sm font-medium text-gray-100">$25.00</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6">
                    <div class="flex h-full items-center">
                      <span class="inline-block w-2 h-2 mr-1 bg-yellow-500 rounded-full"></span>
                      <span class="text-sm font-medium text-gray-100">Pending</span>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="p-0">
                  <div class="h-16 p-6 rounded-l-xl bg-gray-600">
                    <h5 class="text-sm font-medium text-gray-100">INVOICE #3405</h5>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6 bg-gray-600">
                    <span class="text-sm font-medium text-gray-100">$25.00</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="h-16 p-6 bg-gray-600">
                    <h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex h-16 p-6 items-center rounded-r-xl bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-red-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Refunded</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <div class="max-w-xs mx-auto">
            <h4 class="text-gray-50 font-bold mb-1">Auto renewal</h4>
            <p class="text-xs text-gray-300 leading-5 font-medium mb-4">All subscriptions are set to automatically renew, unless you cancel before the next renewal date.</p>
            <div class="flex items-center">
              <button x-data="{ toggle: false }" x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-400': !toggle}" class="flex items-center justify-center h-6 w-11 mr-3 bg-gray-400 rounded-full">
                <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
              </button>
              <span class="text-xs text-gray-300 font-medium">Auto renewal is turrned on</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="max-w-xs mx-auto">
            <h4 class="text-gray-50 font-bold mb-1">Cancel Subscription</h4>
            <p class="text-xs text-gray-300 leading-5 font-medium mb-5">You will lose access to all premium features in your current subscription plan</p>
            <a class="inline-block text-xs font-medium text-blue-500 hover:underline" href="#">Cancel Subscription</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #125

Tailwind CSS

Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="relative py-24 md:py-44 px-8 bg-blue-500 rounded-2xl overflow-hidden">
      <img class="absolute top-0 left-0 h-full w-full object-cover" src="trizzle-assets/images/banner-circle-square-medium.png" alt="">
      <div class="relative max-w-lg mx-auto text-center mb-12">
        <h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Ideal banner asset for your dashboard project</h3>
        <p class="font-medium text-blue-200 mb-6">Go global with our UI Resources and solutions</p>
        <a class="inline-block w-full sm:w-auto px-16 py-3 leading-6 text-center font-semibold text-blue-50 bg-gray-500 hover:bg-gray-600 transition duration-200 rounded-lg" href="#">Get Started</a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #126

Tailwind CSS

Trizzle

<div x-data="{ snackbar: true }" :class="{ 'hidden': !snackbar }" class="z-50 fixed left-0 bottom-0 p-4">
  <div class="max-w-sm bg-gray-500 rounded-lg shadow overflow-hidden">
    <div class="flex flex-wrap w-full h-full items-center justify-between">
      <div class="w-full sm:w-auto px-4 py-4 sm:py-0 border-b border-gray-700 sm:border-transparent">
        <div class="flex items-center pr-6">
          <div class="flex-shrink-0 self-start inline-flex items-center justify-center w-10 h-10 mr-3 bg-yellow-500 bg-opacity-20 rounded-xl">
            <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M21.5601 15.3L13.8901 2.58C13.2598 1.594 12.1703 0.997375 11.0001 0.997375C9.82987 0.997375 8.74038 1.594 8.1101 2.58L0.440101 15.3C-0.111353 16.2192 -0.130414 17.3629 0.390101 18.3C0.992074 19.3551 2.11533 20.0046 3.3301 20H18.6701C19.8766 20.0129 20.9979 19.3797 21.6101 18.34C22.1462 17.3926 22.1271 16.2292 21.5601 15.3ZM11.0001 16C10.4478 16 10.0001 15.5523 10.0001 15C10.0001 14.4477 10.4478 14 11.0001 14C11.5524 14 12.0001 14.4477 12.0001 15C12.0001 15.5523 11.5524 16 11.0001 16ZM11.0001 13C11.5524 13 12.0001 12.5523 12.0001 12V8C12.0001 7.44771 11.5524 7 11.0001 7C10.4478 7 10.0001 7.44771 10.0001 8V12C10.0001 12.5523 10.4478 13 11.0001 13Z" fill="#FFC107"></path>
            </svg>
          </div>
          <span class="text-sm leading-5 text-gray-200 font-semibold">This is a warning message!</span>
        </div>
      </div>
      <div class="w-full sm:w-20 h-16 border-l border-transparent sm:border-gray-700">
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-400 border-b border-gray-700 font-semibold hover:bg-gray-600">No</button>
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-50 font-semibold hover:bg-gray-600">Yes</button>
      </div>
    </div>
  </div>
</div>

Tailwind Component #127

Tailwind CSS

Trizzle

<div class="z-50 fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-gray-800 bg-opacity-80 overflow-y-auto">
  <div class="max-w-xl w-full mx-auto pt-6 px-6 pb-8 bg-gray-500 rounded-xl">
    <div class="flex flex-wrap items-center mb-6">
      <div class="flex items-center justify-center h-14 w-14 mb-4 sm:mb-0 bg-gray-600 rounded-xl mr-4">
        <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19.707 8.29291L11.707 0.292914C11.5672 0.153061 11.389 0.0578154 11.195 0.019223C11.0011 -0.0193694 10.8 0.000424638 10.6173 0.076102C10.4346 0.151779 10.2784 0.279941 10.1685 0.444379C10.0586 0.608817 10 0.802145 10 0.999914V4.54483C7.2683 4.79768 4.72926 6.06078 2.87973 8.08695C1.0302 10.1131 0.0033085 12.7565 2.93403e-09 15.4999V16.9999C-1.59013e-05 17.2076 0.0646263 17.4101 0.184952 17.5794C0.305279 17.7486 0.475319 17.8763 0.671467 17.9445C0.867616 18.0127 1.08014 18.0182 1.27954 17.9601C1.47893 17.9021 1.65531 17.7834 1.78418 17.6205C2.76383 16.4555 3.96583 15.4973 5.31997 14.802C6.6741 14.1068 8.15322 13.6884 9.6709 13.5712C9.7207 13.5649 9.8457 13.5551 10 13.5453V16.9999C10 17.1977 10.0586 17.391 10.1685 17.5555C10.2784 17.7199 10.4346 17.848 10.6173 17.9237C10.8 17.9994 11.0011 18.0192 11.195 17.9806C11.389 17.942 11.5672 17.8468 11.707 17.7069L19.707 9.70691C19.7999 9.61408 19.8735 9.50387 19.9238 9.38256C19.9741 9.26125 19.9999 9.13122 19.9999 8.99991C19.9999 8.8686 19.9741 8.73858 19.9238 8.61727C19.8735 8.49596 19.7999 8.38574 19.707 8.29291ZM12 14.5859V12.4999C12 12.3686 11.9742 12.2385 11.9239 12.1172C11.8737 11.9958 11.8 11.8856 11.7072 11.7927C11.6143 11.6999 11.5041 11.6262 11.3827 11.576C11.2614 11.5257 11.1313 11.4999 11 11.4999C10.7451 11.4999 9.7041 11.5492 9.43848 11.5849C6.74307 11.8332 4.17736 12.8572 2.05176 14.5331C2.29289 12.3274 3.33918 10.2882 4.99026 8.80598C6.64135 7.32373 8.78119 6.50263 11 6.49991C11.1313 6.49995 11.2614 6.47411 11.3827 6.42386C11.5041 6.37362 11.6143 6.29996 11.7072 6.2071C11.8 6.11423 11.8737 6.00398 11.9239 5.88264C11.9742 5.7613 12 5.63125 12 5.49991V3.41397L17.5859 8.99991L12 14.5859Z" fill="#194BFB"></path>
        </svg>
      </div>
      <div class="w-full sm:w-auto">
        <h4 class="text-xl text-gray-100 leading-6 font-semibold">Share to web</h4>
        <span class="text-xs text-gray-300 font-semibold">Publish and share link with anyone</span>
      </div>
    </div>
    <img class="block w-full mb-12" src="trizzle-assets/images/placeholder-card-photo.png" alt="">
    <form action="">
      <div class="flex flex-wrap -mx-3 mb-10">
        <div class="w-full sm:w-2/4 px-3 mb-10 sm:mb-0">
          <div class="relative w-full h-14 py-4 px-3 border border-gray-400 focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">Card number</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput9-1" type="text">
          </div>
        </div>
        <div class="w-1/2 sm:w-1/4 px-3">
          <div class="relative w-full h-14 py-4 px-3 border border-gray-400 focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">Expiry</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput9-2" type="text">
          </div>
        </div>
        <div class="w-1/2 sm:w-1/4 px-3">
          <div class="relative w-full h-14 py-4 px-3 border border-gray-400 focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">CVC</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput9-3" type="text">
          </div>
        </div>
      </div>
      <div class="relative w-full h-14 py-4 px-3 mb-6 border border-gray-400 focus-within:border-green-500 rounded-lg">
        <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">Cardholder name</span>
        <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput9-4" type="text">
      </div>
      <button class="block w-full py-3 px-6 text-center text-blue-50 font-semibold leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200">Update credit card</button>
    </form>
  </div>
</div>

Tailwind Component #128

Tailwind CSS

Trizzle

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-5 py-4 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-full sm:w-auto p-2">
          <p class="text-sm font-medium text-gray-400">
            <span>Showing</span>
            <span class="text-gray-200">1</span>
            <span>to</span>
            <span class="text-gray-200">10</span>
            <span>of 20 results</span>
          </p>
        </div>
        <div class="w-full sm:w-auto p-2">
          <div class="flex h-8">
            <a x-on:click.prevent="inc > min ? inc -= 5 : min" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-gray-400 hover:text-gray-300 rounded-l-lg" href="#">
              <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.6454 2.99997L3.4154 1.22997C3.50852 1.13629 3.5608 1.00957 3.5608 0.877474C3.5608 0.745381 3.50852 0.618656 3.4154 0.524974C3.36892 0.47811 3.31362 0.440913 3.25269 0.415529C3.19176 0.390144 3.12641 0.377075 3.0604 0.377075C2.99439 0.377075 2.92904 0.390144 2.86811 0.415529C2.80718 0.440913 2.75188 0.47811 2.7054 0.524974L0.585399 2.64497C0.538535 2.69146 0.501338 2.74676 0.475954 2.80769C0.450569 2.86862 0.4375 2.93397 0.4375 2.99997C0.4375 3.06598 0.450569 3.13133 0.475954 3.19226C0.501338 3.25319 0.538535 3.30849 0.585399 3.35497L2.7054 5.49997C2.75212 5.54631 2.80753 5.58298 2.86845 5.60786C2.92936 5.63274 2.9946 5.64536 3.0604 5.64497C3.1262 5.64536 3.19143 5.63274 3.25235 5.60786C3.31327 5.58298 3.36868 5.54631 3.4154 5.49997C3.50852 5.40629 3.5608 5.27957 3.5608 5.14747C3.5608 5.01538 3.50852 4.88866 3.4154 4.79497L1.6454 2.99997Z" fill="currentColor"></path>
              </svg>
            </a>
            <a x-text="inc - 4" x-on:click.prevent="active = inc - 4" :class="{'text-gray-100': active == inc - 4, 'text-gray-400': active !== inc - 4 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-100 font-semibold" href="#">1</a>
            <a x-text="inc - 3" x-on:click.prevent="active = inc - 3" :class="{'text-gray-100': active == inc - 3, 'text-gray-400': active !== inc - 3 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">2</a>
            <a x-text="inc - 2" x-on:click.prevent="active = inc - 2" :class="{'text-gray-100': active == inc - 2, 'text-gray-400': active !== inc - 2 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">3</a>
            <a x-text="inc - 1" x-on:click.prevent="active = inc - 4" :class="{'text-gray-100': active == inc - 1, 'text-gray-400': active !== inc - 1 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">4</a>
            <a x-text="inc" x-on:click.prevent="active = inc" :class="{'text-gray-100': active == inc, 'text-gray-400': active !== inc }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">5</a>
            <a x-on:click.prevent="inc < max ? inc += 5 : max" class="inline-flex items-center justify-center w-8 bg-gray-600 text-gray-400 hover:text-gray-300 rounded-r-lg" href="#">
              <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.3546 3.00003L0.584601 4.77003C0.491475 4.86371 0.439205 4.99043 0.439205 5.12253C0.439205 5.25462 0.491475 5.38134 0.584601 5.47503C0.631083 5.52189 0.686383 5.55909 0.747313 5.58447C0.808242 5.60986 0.873595 5.62293 0.939601 5.62293C1.00561 5.62293 1.07096 5.60986 1.13189 5.58447C1.19282 5.55909 1.24812 5.52189 1.2946 5.47503L3.4146 3.35503C3.46146 3.30854 3.49866 3.25324 3.52405 3.19231C3.54943 3.13138 3.5625 3.06603 3.5625 3.00003C3.5625 2.93402 3.54943 2.86867 3.52405 2.80774C3.49866 2.74681 3.46146 2.69151 3.4146 2.64503L1.2946 0.500026C1.24788 0.453685 1.19247 0.417023 1.13155 0.392141C1.07063 0.367258 1.0054 0.354645 0.9396 0.355026C0.873797 0.354645 0.808566 0.367258 0.747647 0.392141C0.686728 0.417023 0.631321 0.453686 0.5846 0.500026C0.491475 0.593707 0.439204 0.720433 0.439204 0.852526C0.439204 0.984619 0.491475 1.11134 0.584601 1.20503L2.3546 3.00003Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #129

Tailwind CSS

Trizzle

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-blue-800 rounded-lg border border-blue-500">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C21.9971 9.34874 20.9425 6.80691 19.0678 4.93219C17.1931 3.05746 14.6513 2.00295 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C19.9976 14.121 19.1539 16.1544 17.6542 17.6542C16.1544 19.1539 14.121 19.9976 12 20ZM12 11.5C11.7348 11.5 11.4804 11.6054 11.2929 11.7929C11.1054 11.9804 11 12.2348 11 12.5V15.5C11 15.7652 11.1054 16.0196 11.2929 16.2071C11.4804 16.3946 11.7348 16.5 12 16.5C12.2652 16.5 12.5196 16.3946 12.7071 16.2071C12.8946 16.0196 13 15.7652 13 15.5V12.5C13 12.2348 12.8946 11.9804 12.7071 11.7929C12.5196 11.6054 12.2652 11.5 12 11.5ZM12 7.5C11.7528 7.5 11.5111 7.57331 11.3055 7.71066C11.1 7.84801 10.9398 8.04324 10.8452 8.27165C10.7505 8.50005 10.7258 8.75139 10.774 8.99386C10.8223 9.23634 10.9413 9.45907 11.1161 9.63388C11.2909 9.8087 11.5137 9.92775 11.7561 9.97598C11.9986 10.0242 12.25 9.99946 12.4784 9.90485C12.7068 9.81024 12.902 9.65002 13.0393 9.44446C13.1767 9.2389 13.25 8.99723 13.25 8.75C13.25 8.41848 13.1183 8.10054 12.8839 7.86612C12.6495 7.6317 12.3315 7.5 12 7.5Z" fill="#1890FF"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-blue-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="#D0F2FF"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Tailwind Component #130

Tailwind CSS

Trizzle

<div x-data="{ activeSlide: 1, slideCount: 12 } " class="z-50 fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-gray-800 bg-opacity-80 overflow-y-auto">
  <div class="max-w-md w-full mx-auto pt-6 px-6 pb-8 bg-gray-500 rounded-xl">
    <div class="mb-6">
      <div class="flex mb-6 items-center justify-between">
        <button class="inline-flex items-center justify-center w-10 h-10 text-gray-400 hover:text-gray-300">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.5 11L1.5 6L6.5 1" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="overflow-hidden">
          <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
            <div class="inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">Jun 2024</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">Feb 2024</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">Mar 2024</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">Apr 2022</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">May 2022</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">June 2022</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">July 2022</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">Aug 2022</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">Sep 2022</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">Oct 2022</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">Nov 2022</span>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
              <span class="visibility-item block text-center font-semibold text-gray-200">Dec 2022</span>
            </div>
          </div>
        </div>
        <button x-on:click.prevent="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="inline-flex items-center justify-center w-10 h-10 text-gray-400 hover:text-gray-300">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.5 11L6.5 6L1.5 1" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="grid grid-cols-7 gap-6 justify-items-center mb-5">
        <div class="flex items-center justify-center w-10 h-10">
          <span class="text-sm font-semibold text-gray-300">Mo</span>
        </div>
        <div class="flex items-center justify-center w-10 h-10">
          <span class="text-sm font-semibold text-gray-300">Tu</span>
        </div>
        <div class="flex items-center justify-center w-10 h-10">
          <span class="text-sm font-semibold text-gray-300">We</span>
        </div>
        <div class="flex items-center justify-center w-10 h-10">
          <span class="text-sm font-semibold text-gray-300">Th</span>
        </div>
        <div class="flex items-center justify-center w-10 h-10">
          <span class="text-sm font-semibold text-gray-300">Fr</span>
        </div>
        <div class="flex items-center justify-center w-10 h-10">
          <span class="text-sm font-semibold text-gray-300">Sat</span>
        </div>
        <div class="flex items-center justify-center w-10 h-10">
          <span class="text-sm font-semibold text-gray-300">Su</span>
        </div>
      </div>
      <div class="grid grid-cols-7 gap-x-6 gap-y-1 justify-items-center">
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="29-06-22">29</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="30-06-22">30</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium bg-gray-600 rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="01-07-22">1</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="02-07-22">2</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="03-07-22">3</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="04-07-22">4</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="05-07-22">5</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="06-07-22">6</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="07-07-22">7</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="08-07-22">8</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="09-07-22">9</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="10-07-22">10</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="11-07-22">11</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="12-07-22">12</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="13-07-22">13</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="14-07-22">14</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="15-07-22">15</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-white font-medium bg-blue-500 rounded-full border border-transparent"><time datatime="16-07-22">16</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="17-07-22">17</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="18-07-22">18</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="19-07-22">19</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="20-07-22">20</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="21-07-22">21</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="22-07-22">22</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="23-07-22">23</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="24-07-22">24</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="25-07-22">25</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="26-07-22">26</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="27-07-22">27</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="28-07-22">28</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="29-07-22">29</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="30-07-22">30</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-200 font-medium rounded-full border-2 border-transparent hover:border-blue-500 focus:bg-blue-500"><time datatime="31-07-22">31</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="01-08-22">1</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="02-08-22">2</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="03-08-22">3</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="04-08-22">4</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="05-08-22">5</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="06-08-22">6</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="07-08-22">7</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="08-08-22">8</time></button>
        <button class="flex items-center justify-center w-10 h-10 text-sm text-gray-400 font-medium rounded-full border-2 border-transparent hover:border-blue-500"><time datatime="09-08-22">9</time></button>
      </div>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full sm:w-1/2 px-3 mb-2 sm:mb-0"><a class="inline-block w-full py-3 px-5 text-center font-semibold leading-6 text-gray-200 bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">Cancel</a></div>
      <div class="w-full sm:w-1/2 px-3"><a class="inline-block w-full py-3 px-5 text-center font-semibold leading-6 text-blue-50 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">Apply</a></div>
    </div>
  </div>
</div>

Tailwind Component #131

Tailwind CSS

Trizzle

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <div class="pb-8 mb-8 border-b border-gray-400">
        <div class="flex flex-wrap items-center justify-between -mx-4">
          <div class="w-full md:w-auto px-4 mb-6 md:mb-0">
            <div class="max-w-xs">
              <h4 class="text-gray-50 leading-6 font-bold">Two Factor Authentication</h4>
              <p class="text-xs text-gray-300 leading-normal font-medium">Two-Factor Authentication (2FA) can be used to help protec your account</p>
            </div>
          </div>
          <div class="w-full md:w-auto px-4"><a class="inline-block py-2 px-5 font-semibold text-blue-50 bg-blue-500 hover:bg-blue-600 rounded-lg tranistion duration-200" href="#">Enable</a></div>
        </div>
      </div>
      <div class="flex flex-wrap justify-between -mx-4 mb-10">
        <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
          <div class="max-w-xs">
            <h4 class="text-gray-50 leading-6 font-bold">Two Factor Authentication</h4>
            <p class="text-xs text-gray-300 leading-normal font-medium mb-4">Two-Factor Authentication (2FA) can be used to help protec your account</p>
            <a class="inline-block py-1 px-2 text-sm leading-5 text-gray-200 font-bold bg-gray-500 hover:bg-gray-700 rounded-lg transition duration-200" href="#">Forgot password?</a>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <form action="">
            <div class="relative w-full h-14 py-4 px-3 mb-8 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-600">Current password</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="securityInput1-1" type="password">
            </div>
            <div class="relative w-full h-14 py-4 px-3 mb-8 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-600">New password</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="securityInput1-2" type="password">
            </div>
            <div class="relative w-full h-14 py-4 px-3 mb-6 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-600">Confirm new password</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="securityInput1-2" type="password">
            </div>
            <button class="block w-full py-3 px-6 text-center text-blue-50 leading-6 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Update password</button>
          </form>
        </div>
      </div>
      <div class="px-10 pt-8 pb-8 mb-10 bg-gray-500 rounded-xl">
        <h4 class="text-lg text-gray-100 font-semibold mb-8">Additional security</h4>
        <div class="pb-6 mb-6 border-b border-gray-400">
          <div class="flex flex-wrap items-center justify-between -mx-4 -mb-5">
            <div class="w-full md:w-w-auto px-4 mb-5">
              <h5 class="text-gray-50 leading-6 font-bold">SMS Recovery</h5>
              <span class="text-xs text-gray-300 font-medium">Number ending with 345</span>
            </div>
            <div class="w-full md:w-w-auto px-4 mb-5"><a class="inline-block ml-auto px-2 py-1 text-xs leading-6 text-blue-50 font-bold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-100" href="#">Enable</a></div>
          </div>
        </div>
        <div class="pb-6 mb-6 border-b border-gray-400">
          <div class="flex flex-wrap items-center justify-between -mx-4 -mb-5">
            <div class="w-full sm:w-auto px-4 mb-5">
              <h5 class="text-gray-50 leading-6 font-bold">Authenticator app</h5>
              <span class="text-xs text-gray-300 font-medium">Google Authenticator</span>
            </div>
            <div class="w-full sm:w-auto px-4 mb-5"><a class="inline-block ml-auto px-2 py-1 text-xs leading-6 text-gray-300 font-bold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-100" href="#">Configure</a></div>
          </div>
        </div>
        <div>
          <div class="flex flex-wrap items-center justify-between -mx-4 -mb-5">
            <div class="w-full sm:w-auto px-4 mb-5">
              <h5 class="text-gray-50 leading-6 font-bold">SSL Certificate</h5>
              <span class="text-xs text-gray-300 font-medium">Secure Socets Layer</span>
            </div>
            <div class="w-full sm:w-auto px-4 mb-5"><a class="inline-block ml-auto px-2 py-1 text-xs leading-6 text-gray-300 font-bold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-100" href="#">Configure</a></div>
          </div>
        </div>
      </div>
      <div class="px-10 pt-8 pb-10 bg-gray-500 rounded-xl">
        <div class="flex flex-wrap items-center justify-between mb-8">
          <div class="w-full md:w-auto mb-2 md:mb-0">
            <h4 class="text-lg text-gray-100 font-semibold">Your devices</h4>
          </div>
          <div class="w-full md:w-auto"><a class="inline-block text-sm font-bold text-blue-500 hover:text-blue-600" href="#">Log out on all devices</a></div>
        </div>
        <div class="pb-6 mb-6 border-b border-gray-400">
          <div class="flex flex-wrap items-center justify-between -mx-4 -mb-5">
            <div class="flex items-center px-4 mb-5">
              <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V11C0 11.7956 0.316071 12.5587 0.87868 13.1213C1.44129 13.6839 2.20435 14 3 14H9V16H5C4.73478 16 4.48043 16.1054 4.29289 16.2929C4.10536 16.4804 4 16.7348 4 17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18H15C15.2652 18 15.5196 17.8946 15.7071 17.7071C15.8946 17.5196 16 17.2652 16 17C16 16.7348 15.8946 16.4804 15.7071 16.2929C15.5196 16.1054 15.2652 16 15 16H11V14H17C17.7956 14 18.5587 13.6839 19.1213 13.1213C19.6839 12.5587 20 11.7956 20 11V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 11C18 11.2652 17.8946 11.5196 17.7071 11.7071C17.5196 11.8946 17.2652 12 17 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V11Z" fill="#194BFB"></path>
              </svg>
              <div class="ml-5">
                <h5 class="text-blue-50 leading-6 font-bold">iMac OSX</h5>
                <span class="text-xs text-gray-300 font-medium">Warsaw • June 06, 2022 at 13:37</span>
              </div>
            </div>
            <div class="w-full sm:w-auto px-4 mb-5"><a class="inline-block ml-auto px-2 py-1 text-xs leading-6 text-gray-300 font-bold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-100" href="#">Log out</a></div>
          </div>
        </div>
        <div class="pb-6 mb-6 border-b border-gray-400">
          <div class="flex flex-wrap items-center justify-between -mx-4 -mb-5">
            <div class="flex items-center px-4 mb-5">
              <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H13C13.7956 20 14.5587 19.6839 15.1213 19.1213C15.6839 18.5587 16 17.7956 16 17V3C16 2.20435 15.6839 1.44129 15.1213 0.87868C14.5587 0.316071 13.7956 0 13 0ZM14 17C14 17.2652 13.8946 17.5196 13.7071 17.7071C13.5196 17.8946 13.2652 18 13 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H13C13.2652 2 13.5196 2.10536 13.7071 2.29289C13.8946 2.48043 14 2.73478 14 3V17ZM8.71 14.29C8.59454 14.1696 8.4508 14.08 8.29186 14.0293C8.13292 13.9787 7.96383 13.9686 7.8 14L7.62 14.06C7.55628 14.0819 7.49574 14.1122 7.44 14.15L7.29 14.27C7.19896 14.3651 7.12759 14.4772 7.08 14.6C7.00342 14.7821 6.9825 14.9828 7.01987 15.1768C7.05725 15.3708 7.15124 15.5494 7.29 15.69C7.38948 15.778 7.50051 15.852 7.62 15.91C7.80306 15.9853 8.00436 16.0046 8.1984 15.9655C8.39244 15.9263 8.57049 15.8304 8.71 15.69C8.89234 15.5062 8.9963 15.2589 9 15C9.00338 14.8688 8.97598 14.7387 8.92 14.62C8.86936 14.4988 8.79833 14.3872 8.71 14.29V14.29Z" fill="#194BFB"></path>
              </svg>
              <div class="ml-5">
                <h5 class="text-blue-50 leading-6 font-bold">iPad Pro</h5>
                <span class="text-xs text-gray-300 font-medium">Warsaw • June 06, 2022 at 13:37</span>
              </div>
            </div>
            <div class="w-full sm:w-auto px-4 mb-5"><a class="inline-block ml-auto px-2 py-1 text-xs leading-6 text-gray-300 font-bold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-100" href="#">Log out</a></div>
          </div>
        </div>
        <div>
          <div class="flex flex-wrap items-center justify-between -mx-4 -mb-5">
            <div class="flex items-center px-4 mb-5">
              <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.71 14.29L7.56 14.17C7.50426 14.1322 7.44372 14.1019 7.38 14.08L7.2 14C7.03782 13.9661 6.86976 13.973 6.71092 14.0201C6.55208 14.0673 6.40744 14.1531 6.29 14.27C6.20167 14.3672 6.13064 14.4788 6.08 14.6C6.00432 14.7822 5.98423 14.9827 6.02226 15.1763C6.06028 15.3699 6.15472 15.5479 6.2937 15.688C6.43267 15.828 6.60996 15.9238 6.80326 15.9633C6.99656 16.0028 7.19722 15.9843 7.38 15.91C7.4995 15.852 7.61052 15.778 7.71 15.69C7.84876 15.5494 7.94275 15.3708 7.98013 15.1768C8.0175 14.9828 7.99658 14.7821 7.92 14.6C7.87014 14.4844 7.79889 14.3792 7.71 14.29ZM11 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H11C11.7956 20 12.5587 19.6839 13.1213 19.1213C13.6839 18.5587 14 17.7956 14 17V3C14 2.20435 13.6839 1.44129 13.1213 0.87868C12.5587 0.316071 11.7956 0 11 0ZM12 17C12 17.2652 11.8946 17.5196 11.7071 17.7071C11.5196 17.8946 11.2652 18 11 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H11C11.2652 2 11.5196 2.10536 11.7071 2.29289C11.8946 2.48043 12 2.73478 12 3V17Z" fill="#194BFB"></path>
              </svg>
              <div class="ml-5">
                <h5 class="text-blue-50 leading-6 font-bold">iPhone 13 Pro</h5>
                <span class="text-xs text-gray-300 font-medium">Warsaw • June 06, 2022 at 13:37</span>
              </div>
            </div>
            <div class="w-full sm:w-auto px-4 mb-5"><a class="inline-block ml-auto px-2 py-1 text-xs leading-6 text-gray-300 font-bold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-100" href="#">Log out</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #132

Tailwind CSS

Trizzle

<div x-data="{ snackbar: true }" :class="{ 'hidden': !snackbar }" class="z-50 fixed left-0 bottom-0 p-4">
  <div class="max-w-sm bg-gray-500 rounded-lg shadow overflow-hidden">
    <div class="flex flex-wrap w-full h-full items-center justify-between">
      <div class="w-full sm:w-auto px-4 py-4 sm:py-0 border-b border-gray-700 sm:border-transparent">
        <div class="flex items-center pr-6">
          <div class="flex-shrink-0 self-start inline-flex items-center justify-center w-10 h-10 mr-3 bg-red-500 bg-opacity-20 rounded-xl">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0ZM10 15C9.44771 15 9 14.5523 9 14C9 13.4477 9.44771 13 10 13C10.5523 13 11 13.4477 11 14C11 14.5523 10.5523 15 10 15ZM10 12C10.5523 12 11 11.5523 11 11V6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6V11C9 11.5523 9.44771 12 10 12Z" fill="#FF4842"></path>
            </svg>
          </div>
          <span class="text-sm leading-5 text-gray-200 font-semibold">This is a error message!</span>
        </div>
      </div>
      <div class="w-full sm:w-20 h-16 border-l border-transparent sm:border-gray-700">
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-400 border-b border-gray-700 font-semibold hover:bg-gray-600">No</button>
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-50 font-semibold hover:bg-gray-600">Yes</button>
      </div>
    </div>
  </div>
</div>

Tailwind Component #133

Tailwind CSS

Trizzle

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-green-800 rounded-lg border border-green-500">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.72 6.79L8.43001 11.09L6.78 9.44C6.69036 9.33532 6.58004 9.2503 6.45597 9.19027C6.33191 9.13025 6.19678 9.09652 6.05906 9.0912C5.92134 9.08588 5.78401 9.10909 5.65568 9.15936C5.52736 9.20964 5.41081 9.28589 5.31335 9.38335C5.2159 9.4808 5.13964 9.59735 5.08937 9.72568C5.03909 9.854 5.01589 9.99133 5.02121 10.1291C5.02653 10.2668 5.06026 10.4019 5.12028 10.526C5.1803 10.65 5.26532 10.7604 5.37 10.85L7.72 13.21C7.81344 13.3027 7.92426 13.376 8.0461 13.4258C8.16794 13.4755 8.2984 13.5008 8.43001 13.5C8.69234 13.4989 8.94374 13.3947 9.13 13.21L14.13 8.21C14.2237 8.11704 14.2981 8.00644 14.3489 7.88458C14.3997 7.76272 14.4258 7.63201 14.4258 7.5C14.4258 7.36799 14.3997 7.23728 14.3489 7.11542C14.2981 6.99356 14.2237 6.88296 14.13 6.79C13.9426 6.60375 13.6892 6.49921 13.425 6.49921C13.1608 6.49921 12.9074 6.60375 12.72 6.79ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18Z" fill="#54D62C"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-green-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block text-green-50">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Tailwind Component #134

Tailwind CSS

Trizzle

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-5 py-4">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-full sm:w-auto p-2">
          <p class="text-sm font-medium text-gray-400">
            <span>Showing</span>
            <span class="text-gray-200">1</span>
            <span>to</span>
            <span class="text-gray-200">10</span>
            <span>of 20 results</span>
          </p>
        </div>
        <div class="w-full sm:w-auto p-2">
          <div class="flex h-8">
            <a x-on:click.prevent="inc > min ? inc -= 5 : min" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-gray-400 hover:text-gray-300 rounded-l-lg" href="#">
              <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.6454 2.99997L3.4154 1.22997C3.50852 1.13629 3.5608 1.00957 3.5608 0.877474C3.5608 0.745381 3.50852 0.618656 3.4154 0.524974C3.36892 0.47811 3.31362 0.440913 3.25269 0.415529C3.19176 0.390144 3.12641 0.377075 3.0604 0.377075C2.99439 0.377075 2.92904 0.390144 2.86811 0.415529C2.80718 0.440913 2.75188 0.47811 2.7054 0.524974L0.585399 2.64497C0.538535 2.69146 0.501338 2.74676 0.475954 2.80769C0.450569 2.86862 0.4375 2.93397 0.4375 2.99997C0.4375 3.06598 0.450569 3.13133 0.475954 3.19226C0.501338 3.25319 0.538535 3.30849 0.585399 3.35497L2.7054 5.49997C2.75212 5.54631 2.80753 5.58298 2.86845 5.60786C2.92936 5.63274 2.9946 5.64536 3.0604 5.64497C3.1262 5.64536 3.19143 5.63274 3.25235 5.60786C3.31327 5.58298 3.36868 5.54631 3.4154 5.49997C3.50852 5.40629 3.5608 5.27957 3.5608 5.14747C3.5608 5.01538 3.50852 4.88866 3.4154 4.79497L1.6454 2.99997Z" fill="currentColor"></path>
              </svg>
            </a>
            <a x-text="inc - 4" x-on:click.prevent="active = inc - 4" :class="{'text-gray-100': active == inc - 4, 'text-gray-400': active !== inc - 4 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-100 font-semibold" href="#">1</a>
            <a x-text="inc - 3" x-on:click.prevent="active = inc - 3" :class="{'text-gray-100': active == inc - 3, 'text-gray-400': active !== inc - 3 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">2</a>
            <a x-text="inc - 2" x-on:click.prevent="active = inc - 2" :class="{'text-gray-100': active == inc - 2, 'text-gray-400': active !== inc - 2 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">3</a>
            <a x-text="inc - 1" x-on:click.prevent="active = inc - 1" :class="{'text-gray-100': active == inc - 1, 'text-gray-400': active !== inc - 1 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">4</a>
            <a x-text="inc" x-on:click.prevent="active = inc" :class="{'text-gray-100': active == inc, 'text-gray-400': active !== inc }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">5</a>
            <a x-on:click.prevent="inc < max ? inc += 5 : max" class="inline-flex items-center justify-center w-8 bg-gray-500 text-gray-400 hover:text-gray-300 rounded-r-lg" href="#">
              <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.3546 3.00003L0.584601 4.77003C0.491475 4.86371 0.439205 4.99043 0.439205 5.12253C0.439205 5.25462 0.491475 5.38134 0.584601 5.47503C0.631083 5.52189 0.686383 5.55909 0.747313 5.58447C0.808242 5.60986 0.873595 5.62293 0.939601 5.62293C1.00561 5.62293 1.07096 5.60986 1.13189 5.58447C1.19282 5.55909 1.24812 5.52189 1.2946 5.47503L3.4146 3.35503C3.46146 3.30854 3.49866 3.25324 3.52405 3.19231C3.54943 3.13138 3.5625 3.06603 3.5625 3.00003C3.5625 2.93402 3.54943 2.86867 3.52405 2.80774C3.49866 2.74681 3.46146 2.69151 3.4146 2.64503L1.2946 0.500026C1.24788 0.453685 1.19247 0.417023 1.13155 0.392141C1.07063 0.367258 1.0054 0.354645 0.9396 0.355026C0.873797 0.354645 0.808566 0.367258 0.747647 0.392141C0.686728 0.417023 0.631321 0.453686 0.5846 0.500026C0.491475 0.593707 0.439204 0.720433 0.439204 0.852526C0.439204 0.984619 0.491475 1.11134 0.584601 1.20503L2.3546 3.00003Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #135

Tailwind CSS

Trizzle

<section x-data="{ tab: 'biography' }" class="py-8">
  <div class="container px-4 mx-auto">
    <div class="p-6 mb-8 bg-gray-500 rounded-xl">
      <div class="relative">
        <img class="block w-full h-72 object-cover" src="trizzle-assets/images/banner-do-something.png" alt="">
        <div class="absolute bottom-0 left-0 w-full flex flex-wrap p-6 items-center justify-between">
          <div class="flex items-center w-full md:w-auto mb-5 md:mb-0">
            <img class="w-12 sm:w-16 h-12 sm:h-16 mr-2 md:mr-6 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
            <div>
              <h5 class="text-xl text-blue-50 font-bold">John Doe</h5>
              <span class="text-gray-300">Front-End Developer</span>
            </div>
          </div>
          <a class="inline-block w-64 py-3 px-6 text-center text-sm leading-6 text-white font-bold bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-xl" href="#">Contact</a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="p-3 mb-6 bg-gray-500 rounded-xl">
          <ul>
            <li><a x-on:click.prevent="tab = 'biography'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Biography</a></li>
            <li><a x-on:click.prevent="tab = 'job-experience'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Job Experience</a></li>
            <li><a x-on:click.prevent="tab = 'skills'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Skills</a></li>
            <li><a x-on:click.prevent="tab = 'education'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Education</a></li>
            <li><a x-on:click.prevent="tab = 'portfolio'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Portfolio</a></li>
            <li><a x-on:click.prevent="tab = 'language'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Language</a></li>
          </ul>
        </div>
        <div class="p-3 bg-gray-500 rounded-xl">
          <ul>
            <li><a x-on:click.prevent="tab = 'contact'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Contact</a></li>
            <li><a x-on:click.prevent="tab = 'interest'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Interest</a></li>
            <li><a x-on:click.prevent="tab = 'recommendation'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Recommendation</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-4">
        <div x-show="tab == 'biography'" class="p-8 bg-gray-500 rounded-xl">
          <div class="pb-6 mb-8 border-b border-gray-400">
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Biography</h3>
            <p class="leading-normal text-gray-300 font-medium mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris nisl, lacinia ut mauris semper, posuere fermentum nisl. Vestibulum sem orci, aliquet cursus sollicitudin sed, mattis id dolor. Sed et dictum mauris. Integer vel viverra purus. Morbi pulvinar convallis quam sed feugiat.</p>
            <p class="leading-normal text-gray-300 font-medium">Ut sit amet arcu eget massa facilisis mollis. Nullam malesuada feugiat velit sit amet porta. Cras lacinia sem ut ipsum tincidunt pharetra. Donec fermentum auctor felis nec hendrerit. Vivamus condimentum commodo tellus. Proin egestas fermentum sem, in accumsan neque bibendum et.</p>
          </div>
          <div class="pb-8 mb-8 border-b border-gray-400">
            <div class="flex flex-wrap items-center justify-between -mb-4">
              <h3 class="text-lg font-semibold text-gray-100 mb-4">Tech stack</h3>
              <div class="mb-4">
                <div class="inline-flex mr-4 items-center justify-center p-1 h-12 w-12 bg-gray-600 rounded-lg">
                  <img src="trizzle-assets/logos/html5-logo.svg" alt="">
                </div>
                <div class="inline-flex mr-4 items-center justify-center p-1 h-12 w-12 bg-gray-600 rounded-lg">
                  <img src="trizzle-assets/logos/css3-logo.svg" alt="">
                </div>
                <div class="inline-flex items-center justify-center p-1 h-12 w-12 bg-gray-600 rounded-lg">
                  <img src="trizzle-assets/logos/javascript-logo.svg" alt="">
                </div>
              </div>
            </div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Career Preference</h3>
            <div class="-mb-3">
              <span class="inline-block py-2 px-4 mb-3 mr-3 text-gray-300 leading-6 bg-gray-600 rounded-full">Wordpress Developer</span>
              <span class="inline-block py-2 px-4 mb-3 mr-3 text-gray-300 leading-6 bg-gray-600 rounded-full">CSS Developer</span>
              <span class="inline-block py-2 px-4 mb-3 text-gray-300 leading-6 bg-gray-600 rounded-full">IT Support Tracking</span>
            </div>
          </div>
        </div>
        <div x-show="tab == 'job-experience'" class="visibility-item p-8 bg-gray-500 rounded-xl">
          <div class="pb-6">
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Job Experience</h3>
            <p class="leading-normal text-gray-300 font-medium mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris nisl, lacinia ut mauris semper, posuere fermentum nisl. Vestibulum sem orci, aliquet cursus sollicitudin sed, mattis id dolor. Sed et dictum mauris. Integer vel viverra purus. Morbi pulvinar convallis quam sed feugiat.</p>
            <p class="leading-normal text-gray-300 font-medium">Ut sit amet arcu eget massa facilisis mollis. Nullam malesuada feugiat velit sit amet porta. Cras lacinia sem ut ipsum tincidunt pharetra. Donec fermentum auctor felis nec hendrerit. Vivamus condimentum commodo tellus. Proin egestas fermentum sem, in accumsan neque bibendum et.</p>
          </div>
        </div>
        <div x-show="tab == 'skills'" class="visibility-item p-8 bg-gray-500 rounded-xl">
          <div class="pb-6">
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Skills</h3>
            <p class="leading-normal text-gray-300 font-medium mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris nisl, lacinia ut mauris semper, posuere fermentum nisl. Vestibulum sem orci, aliquet cursus sollicitudin sed, mattis id dolor. Sed et dictum mauris. Integer vel viverra purus. Morbi pulvinar convallis quam sed feugiat.</p>
            <p class="leading-normal text-gray-300 font-medium">Ut sit amet arcu eget massa facilisis mollis. Nullam malesuada feugiat velit sit amet porta. Cras lacinia sem ut ipsum tincidunt pharetra. Donec fermentum auctor felis nec hendrerit. Vivamus condimentum commodo tellus. Proin egestas fermentum sem, in accumsan neque bibendum et.</p>
          </div>
        </div>
        <div x-show="tab == 'education'" class="visibility-item p-8 bg-gray-500 rounded-xl">
          <div class="pb-6">
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Education</h3>
            <p class="leading-normal text-gray-300 font-medium mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris nisl, lacinia ut mauris semper, posuere fermentum nisl. Vestibulum sem orci, aliquet cursus sollicitudin sed, mattis id dolor. Sed et dictum mauris. Integer vel viverra purus. Morbi pulvinar convallis quam sed feugiat.</p>
            <p class="leading-normal text-gray-300 font-medium">Ut sit amet arcu eget massa facilisis mollis. Nullam malesuada feugiat velit sit amet porta. Cras lacinia sem ut ipsum tincidunt pharetra. Donec fermentum auctor felis nec hendrerit. Vivamus condimentum commodo tellus. Proin egestas fermentum sem, in accumsan neque bibendum et.</p>
          </div>
        </div>
        <div x-show="tab == 'portfolio'" class="visibility-item p-8 bg-gray-500 rounded-xl">
          <div class="pb-6">
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Portfolio</h3>
            <p class="leading-normal text-gray-300 font-medium mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris nisl, lacinia ut mauris semper, posuere fermentum nisl. Vestibulum sem orci, aliquet cursus sollicitudin sed, mattis id dolor. Sed et dictum mauris. Integer vel viverra purus. Morbi pulvinar convallis quam sed feugiat.</p>
            <p class="leading-normal text-gray-300 font-medium">Ut sit amet arcu eget massa facilisis mollis. Nullam malesuada feugiat velit sit amet porta. Cras lacinia sem ut ipsum tincidunt pharetra. Donec fermentum auctor felis nec hendrerit. Vivamus condimentum commodo tellus. Proin egestas fermentum sem, in accumsan neque bibendum et.</p>
          </div>
        </div>
        <div x-show="tab == 'language'" class="visibility-item p-8 bg-gray-500 rounded-xl">
          <div class="pb-6">
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Language</h3>
            <p class="leading-normal text-gray-300 font-medium mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris nisl, lacinia ut mauris semper, posuere fermentum nisl. Vestibulum sem orci, aliquet cursus sollicitudin sed, mattis id dolor. Sed et dictum mauris. Integer vel viverra purus. Morbi pulvinar convallis quam sed feugiat.</p>
            <p class="leading-normal text-gray-300 font-medium">Ut sit amet arcu eget massa facilisis mollis. Nullam malesuada feugiat velit sit amet porta. Cras lacinia sem ut ipsum tincidunt pharetra. Donec fermentum auctor felis nec hendrerit. Vivamus condimentum commodo tellus. Proin egestas fermentum sem, in accumsan neque bibendum et.</p>
          </div>
        </div>
        <div x-show="tab == 'contact'" class="visibility-item p-8 bg-gray-500 rounded-xl">
          <div class="pb-6">
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Contact</h3>
            <p class="leading-normal text-gray-300 font-medium mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris nisl, lacinia ut mauris semper, posuere fermentum nisl. Vestibulum sem orci, aliquet cursus sollicitudin sed, mattis id dolor. Sed et dictum mauris. Integer vel viverra purus. Morbi pulvinar convallis quam sed feugiat.</p>
            <p class="leading-normal text-gray-300 font-medium">Ut sit amet arcu eget massa facilisis mollis. Nullam malesuada feugiat velit sit amet porta. Cras lacinia sem ut ipsum tincidunt pharetra. Donec fermentum auctor felis nec hendrerit. Vivamus condimentum commodo tellus. Proin egestas fermentum sem, in accumsan neque bibendum et.</p>
          </div>
        </div>
        <div x-show="tab == 'interest'" class="visibility-item p-8 bg-gray-500 rounded-xl">
          <div class="pb-6">
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Interest</h3>
            <p class="leading-normal text-gray-300 font-medium mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris nisl, lacinia ut mauris semper, posuere fermentum nisl. Vestibulum sem orci, aliquet cursus sollicitudin sed, mattis id dolor. Sed et dictum mauris. Integer vel viverra purus. Morbi pulvinar convallis quam sed feugiat.</p>
            <p class="leading-normal text-gray-300 font-medium">Ut sit amet arcu eget massa facilisis mollis. Nullam malesuada feugiat velit sit amet porta. Cras lacinia sem ut ipsum tincidunt pharetra. Donec fermentum auctor felis nec hendrerit. Vivamus condimentum commodo tellus. Proin egestas fermentum sem, in accumsan neque bibendum et.</p>
          </div>
        </div>
        <div x-show="tab == 'recommendation'" class="visibility-item p-8 bg-gray-500 rounded-xl">
          <div class="pb-6">
            <h3 class="text-lg font-semibold text-gray-100 mb-6">Recommendation</h3>
            <p class="leading-normal text-gray-300 font-medium mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris nisl, lacinia ut mauris semper, posuere fermentum nisl. Vestibulum sem orci, aliquet cursus sollicitudin sed, mattis id dolor. Sed et dictum mauris. Integer vel viverra purus. Morbi pulvinar convallis quam sed feugiat.</p>
            <p class="leading-normal text-gray-300 font-medium">Ut sit amet arcu eget massa facilisis mollis. Nullam malesuada feugiat velit sit amet porta. Cras lacinia sem ut ipsum tincidunt pharetra. Donec fermentum auctor felis nec hendrerit. Vivamus condimentum commodo tellus. Proin egestas fermentum sem, in accumsan neque bibendum et.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #136

Tailwind CSS

Trizzle

<div class="z-50 fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-gray-800 bg-opacity-80 overflow-y-auto">
  <div class="max-w-xl w-full mx-auto p-6 bg-gray-500 rounded-xl">
    <div class="relative">
      <div class="absolute top-0 right-0 mt-2 flex items-center">
        <button class="flex mr-2 items-center justify-center w-8 h-8 bg-gray-600 hover:bg-gray-700 rounded-lg">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.9997 6.99963C12.8229 6.99963 12.6533 7.06987 12.5283 7.1949C12.4032 7.31992 12.333 7.48949 12.333 7.6663V11.6663C12.333 11.8431 12.2628 12.0127 12.1377 12.1377C12.0127 12.2627 11.8432 12.333 11.6663 12.333H2.33301C2.1562 12.333 1.98663 12.2627 1.8616 12.1377C1.73658 12.0127 1.66634 11.8431 1.66634 11.6663V2.33297C1.66634 2.15616 1.73658 1.98659 1.8616 1.86156C1.98663 1.73654 2.1562 1.6663 2.33301 1.6663H6.33301C6.50982 1.6663 6.67939 1.59606 6.80441 1.47104C6.92944 1.34601 6.99967 1.17644 6.99967 0.999634C6.99967 0.822823 6.92944 0.653253 6.80441 0.528229C6.67939 0.403205 6.50982 0.332967 6.33301 0.332967H2.33301C1.80257 0.332967 1.29387 0.543681 0.918794 0.918754C0.543722 1.29383 0.333008 1.80253 0.333008 2.33297V11.6663C0.333008 12.1967 0.543722 12.7054 0.918794 13.0805C1.29387 13.4556 1.80257 13.6663 2.33301 13.6663H11.6663C12.1968 13.6663 12.7055 13.4556 13.0806 13.0805C13.4556 12.7054 13.6663 12.1967 13.6663 11.6663V7.6663C13.6663 7.48949 13.5961 7.31992 13.4711 7.1949C13.3461 7.06987 13.1765 6.99963 12.9997 6.99963ZM2.99967 7.5063V10.333C2.99967 10.5098 3.06991 10.6793 3.19494 10.8044C3.31996 10.9294 3.48953 10.9996 3.66634 10.9996H6.49301C6.58075 11.0001 6.66772 10.9833 6.74895 10.9501C6.83017 10.917 6.90405 10.8681 6.96634 10.8063L11.5797 6.1863L13.473 4.33297C13.5355 4.27099 13.5851 4.19726 13.6189 4.11602C13.6528 4.03478 13.6702 3.94764 13.6702 3.85963C13.6702 3.77163 13.6528 3.68449 13.6189 3.60325C13.5851 3.52201 13.5355 3.44828 13.473 3.3863L10.6463 0.5263C10.5844 0.463815 10.5106 0.414219 10.4294 0.380373C10.3482 0.346527 10.261 0.329102 10.173 0.329102C10.085 0.329102 9.99786 0.346527 9.91662 0.380373C9.83538 0.414219 9.76165 0.463815 9.69967 0.5263L7.81967 2.41297L3.19301 7.03297C3.13122 7.09526 3.08234 7.16914 3.04916 7.25036C3.01598 7.33159 2.99917 7.41856 2.99967 7.5063ZM10.173 1.93963L12.0597 3.8263L11.113 4.77297L9.22634 2.8863L10.173 1.93963ZM4.33301 7.77963L8.28634 3.8263L10.173 5.71297L6.21967 9.6663H4.33301V7.77963Z" fill="#3D485B"></path>
          </svg>
        </button>
        <button class="flex mr-2 items-center justify-center w-8 h-8 bg-gray-600 hover:bg-gray-700 rounded-lg">
          <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 0.666992C5.73629 0.666992 5.47851 0.745191 5.25924 0.891699C5.03998 1.03821 4.86908 1.24645 4.76816 1.49008C4.66724 1.73372 4.64084 2.0018 4.69229 2.26045C4.74373 2.51909 4.87072 2.75666 5.05719 2.94313C5.24366 3.1296 5.48124 3.25659 5.73988 3.30804C5.99852 3.35949 6.26661 3.33308 6.51025 3.23216C6.75388 3.13125 6.96212 2.96035 7.10863 2.74109C7.25514 2.52182 7.33333 2.26403 7.33333 2.00033C7.33333 1.6467 7.19286 1.30757 6.94281 1.05752C6.69276 0.807468 6.35362 0.666992 6 0.666992ZM1.33333 0.666992C1.06963 0.666992 0.811839 0.745191 0.592574 0.891699C0.373308 1.03821 0.202411 1.24645 0.101495 1.49008C0.000577708 1.73372 -0.0258267 2.0018 0.0256202 2.26045C0.0770672 2.51909 0.204055 2.75666 0.390525 2.94313C0.576995 3.1296 0.814572 3.25659 1.07321 3.30804C1.33185 3.35949 1.59994 3.33308 1.84358 3.23216C2.08721 3.13125 2.29545 2.96035 2.44196 2.74109C2.58847 2.52182 2.66667 2.26403 2.66667 2.00033C2.66667 1.6467 2.52619 1.30757 2.27614 1.05752C2.02609 0.807468 1.68696 0.666992 1.33333 0.666992ZM10.6667 0.666992C10.403 0.666992 10.1452 0.745191 9.92591 0.891699C9.70664 1.03821 9.53574 1.24645 9.43483 1.49008C9.33391 1.73372 9.30751 2.0018 9.35895 2.26045C9.4104 2.51909 9.53739 2.75666 9.72386 2.94313C9.91033 3.1296 10.1479 3.25659 10.4065 3.30804C10.6652 3.35949 10.9333 3.33308 11.1769 3.23216C11.4205 3.13125 11.6288 2.96035 11.7753 2.74109C11.9218 2.52182 12 2.26403 12 2.00033C12 1.6467 11.8595 1.30757 11.6095 1.05752C11.3594 0.807468 11.0203 0.666992 10.6667 0.666992Z" fill="#3D485B"></path>
          </svg>
        </button>
      </div>
      <div class="mb-2">
        <span class="text-xs font-semibold text-gray-400">Design /</span>
        <span class="text-xs font-semibold text-gray-300">D-14</span>
      </div>
      <h4 class="text-lg font-semibold text-gray-200 mb-6">Improve button component</h4>
      <div class="pb-8 mb-8 border-b border-gray-400">
        <div class="flex mb-6 items-center">
          <span class="block w-24 text-xs font-semibold text-gray-400">Status</span>
          <span class="text-xs font-semibold text-gray-200">In Progress</span>
        </div>
        <div class="flex mb-6 items-center">
          <span class="block w-24 text-xs font-semibold text-gray-400">Assignee</span>
          <div class="flex items-center">
            <img class="w-4 h-4 mr-2" src="trizzle-assets/images/avatar-men-2.png" alt="">
            <span class="text-xs font-semibold text-gray-200">John Doe</span>
          </div>
        </div>
        <div class="flex mb-6 items-center">
          <span class="block w-24 text-xs font-semibold text-gray-400">Due date</span>
          <span class="text-xs font-semibold text-gray-200">August 20, 2022</span>
        </div>
        <div class="flex items-center">
          <span class="block w-24 text-xs font-semibold text-gray-400">Label</span>
          <span class="inline-block py-1 px-2 mr-3 text-xs font-medium text-green-500 bg-green-800 bg-opacity-80 rounded-full">Development</span>
          <button class="flex items-center text-xs font-semibold text-gray-400 hover:text-gray-300">
            <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.5 3.5H4.5V0.5C4.5 0.367392 4.44732 0.240215 4.35355 0.146447C4.25979 0.0526785 4.13261 0 4 0C3.86739 0 3.74021 0.0526785 3.64645 0.146447C3.55268 0.240215 3.5 0.367392 3.5 0.5V3.5H0.5C0.367392 3.5 0.240215 3.55268 0.146447 3.64645C0.0526785 3.74021 0 3.86739 0 4C0 4.13261 0.0526785 4.25979 0.146447 4.35355C0.240215 4.44732 0.367392 4.5 0.5 4.5H3.5V7.5C3.5 7.63261 3.55268 7.75979 3.64645 7.85355C3.74021 7.94732 3.86739 8 4 8C4.13261 8 4.25979 7.94732 4.35355 7.85355C4.44732 7.75979 4.5 7.63261 4.5 7.5V4.5H7.5C7.63261 4.5 7.75979 4.44732 7.85355 4.35355C7.94732 4.25979 8 4.13261 8 4C8 3.86739 7.94732 3.74021 7.85355 3.64645C7.75979 3.55268 7.63261 3.5 7.5 3.5Z" fill="currentColor"></path>
            </svg>
            <span class="ml-1">Add label</span>
          </button>
        </div>
      </div>
      <div class="pb-8 mb-8 border-b border-gray-400">
        <span class="block mb-2 text-xs font-semibold text-gray-400">To do</span>
        <p class="text-xs leading-normal font-semibold text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur leo sit amet vestibulum viverra. Fusce placerat quis eros eget elementum. Cras turpis nisl, aliquet sit amet sapien et, volutpat pharetra turpis. Sed sed enim mollis, sodales magna in, ultrices orci. Morbi porta tempor ullamcorper.</p>
      </div>
      <div>
        <span class="block mb-6 text-xs font-semibold text-gray-200">Activity</span>
        <div>
          <div class="flex mb-6">
            <div class="flex-shrink-0 w-8 h-8 mr-3 relative">
              <div class="absolute bottom-0 right-0 flex items-center justify-center w-3 h-3 bg-gray-500 rounded-full">
                <div class="w-2 h-2 bg-green-500 rounded-full"></div>
              </div>
              <img class="w-8 h-8 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
            </div>
            <div>
              <div class="py-3 px-4 bg-gray-600 rounded-lg mb-2">
                <span class="block mb-2 text-xs font-semibold text-gray-400">John Doe</span>
                <p class="text-xs font-medium text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur leo sit amet vestibulum viverra. Fusce placerat quis eros eget elementum.</p>
              </div>
              <button class="inline-block ml-4 text-xs font-medium text-gray-300 hover:text-gray-200">Reply</button>
            </div>
          </div>
          <div class="flex">
            <div class="flex-shrink-0 w-8 h-8 mr-3 relative">
              <div class="absolute bottom-0 right-0 flex items-center justify-center w-3 h-3 bg-gray-500 rounded-full">
                <div class="w-2 h-2 bg-green-500 rounded-full"></div>
              </div>
              <img class="w-8 h-8 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
            </div>
            <input class="block w-full px-4 py-2 text-xs font-semibold text-gray-300 placeholder-gray-400 bg-transparent outline-none border border-gray-400 focus-within:border-green-500 rounded-lg" id="modalInput11-1" type="text" placeholder="Placeholder...">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tailwind Component #137

Tailwind CSS

Trizzle

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-yellow-900 rounded-lg border border-yellow-500">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0005 15C11.8027 15 11.6093 15.0587 11.4449 15.1686C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8001 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4805 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47003C14.3603 2.00354 13.9802 1.61498 13.5196 1.3445C13.0591 1.07401 12.5346 0.931396 12.0005 0.931396C11.4663 0.931396 10.9419 1.07401 10.4813 1.3445C10.0207 1.61498 9.64065 2.00354 9.38046 2.47003L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0166 1.34914 19.4761C1.60883 19.9356 1.98516 20.3185 2.44014 20.5861C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0053 21.1164 20.8689 21.5784 20.6049C22.0403 20.341 22.4238 19.9589 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9814C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.626 20.7249 18.7556 20.5701 18.8453C20.4154 18.935 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.935 3.43077 18.8453C3.27599 18.7556 3.14811 18.626 3.06046 18.47C2.97269 18.318 2.92648 18.1456 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47003C11.1444 3.30623 11.2719 3.16876 11.4289 3.07277C11.5859 2.97678 11.7664 2.92599 11.9505 2.92599C12.1345 2.92599 12.315 2.97678 12.472 3.07277C12.629 3.16876 12.7565 3.30623 12.8405 3.47003L20.8905 17.47C20.9897 17.6199 21.0467 17.7937 21.0555 17.9732C21.0643 18.1527 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7.00003C11.7352 7.00003 11.4809 7.10538 11.2933 7.29292C11.1058 7.48046 11.0005 7.73481 11.0005 8.00003V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8947 11.7352 13 12.0005 13C12.2657 13 12.52 12.8947 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8.00003C13.0005 7.73481 12.8951 7.48046 12.7076 7.29292C12.52 7.10538 12.2657 7.00003 12.0005 7.00003Z" fill="#FFC107"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-blue-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block text-yellow-50">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Tailwind Component #138

Tailwind CSS

Trizzle

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-5 py-6 bg-gray-500 rounded-xl">
      <div class="flex items-center justify-center">
        <div class="flex h-8">
          <a x-on:click.prevent="inc > min ? inc -= 5 : min" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-gray-400 hover:text-gray-300 rounded-l-lg" href="#">
            <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.6454 2.99997L3.4154 1.22997C3.50852 1.13629 3.5608 1.00957 3.5608 0.877474C3.5608 0.745381 3.50852 0.618656 3.4154 0.524974C3.36892 0.47811 3.31362 0.440913 3.25269 0.415529C3.19176 0.390144 3.12641 0.377075 3.0604 0.377075C2.99439 0.377075 2.92904 0.390144 2.86811 0.415529C2.80718 0.440913 2.75188 0.47811 2.7054 0.524974L0.585399 2.64497C0.538535 2.69146 0.501338 2.74676 0.475954 2.80769C0.450569 2.86862 0.4375 2.93397 0.4375 2.99997C0.4375 3.06598 0.450569 3.13133 0.475954 3.19226C0.501338 3.25319 0.538535 3.30849 0.585399 3.35497L2.7054 5.49997C2.75212 5.54631 2.80753 5.58298 2.86845 5.60786C2.92936 5.63274 2.9946 5.64536 3.0604 5.64497C3.1262 5.64536 3.19143 5.63274 3.25235 5.60786C3.31327 5.58298 3.36868 5.54631 3.4154 5.49997C3.50852 5.40629 3.5608 5.27957 3.5608 5.14747C3.5608 5.01538 3.50852 4.88866 3.4154 4.79497L1.6454 2.99997Z" fill="currentColor"></path>
            </svg>
          </a>
          <a x-text="inc - 4" x-on:click.prevent="active = inc - 4" :class="{'text-gray-100': active == inc - 4, 'text-gray-400': active !== inc - 4 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-100 font-semibold" href="#">1</a>
          <a x-text="inc - 3" x-on:click.prevent="active = inc - 3" :class="{'text-gray-100': active == inc - 3, 'text-gray-400': active !== inc - 3 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">2</a>
          <a x-text="inc - 2" x-on:click.prevent="active = inc - 2" :class="{'text-gray-100': active == inc - 2, 'text-gray-400': active !== inc - 2 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">3</a>
          <a x-text="inc - 1" x-on:click.prevent="active = inc - 1" :class="{'text-gray-100': active == inc - 1, 'text-gray-400': active !== inc - 1 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">4</a>
          <a x-text="inc" x-on:click.prevent="active = inc" :class="{'text-gray-100': active == inc, 'text-gray-400': active !== inc }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">5</a>
          <a x-on:click.prevent="inc < max ? inc += 5 : max" class="inline-flex items-center justify-center w-8 bg-gray-600 text-gray-400 hover:text-gray-300 rounded-r-lg" href="#">
            <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.3546 3.00003L0.584601 4.77003C0.491475 4.86371 0.439205 4.99043 0.439205 5.12253C0.439205 5.25462 0.491475 5.38134 0.584601 5.47503C0.631083 5.52189 0.686383 5.55909 0.747313 5.58447C0.808242 5.60986 0.873595 5.62293 0.939601 5.62293C1.00561 5.62293 1.07096 5.60986 1.13189 5.58447C1.19282 5.55909 1.24812 5.52189 1.2946 5.47503L3.4146 3.35503C3.46146 3.30854 3.49866 3.25324 3.52405 3.19231C3.54943 3.13138 3.5625 3.06603 3.5625 3.00003C3.5625 2.93402 3.54943 2.86867 3.52405 2.80774C3.49866 2.74681 3.46146 2.69151 3.4146 2.64503L1.2946 0.500026C1.24788 0.453685 1.19247 0.417023 1.13155 0.392141C1.07063 0.367258 1.0054 0.354645 0.9396 0.355026C0.873797 0.354645 0.808566 0.367258 0.747647 0.392141C0.686728 0.417023 0.631321 0.453686 0.5846 0.500026C0.491475 0.593707 0.439204 0.720433 0.439204 0.852526C0.439204 0.984619 0.491475 1.11134 0.584601 1.20503L2.3546 3.00003Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #139

Tailwind CSS

Trizzle

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-6 xl:mb-0">
        <div class="pt-8 bg-gray-500 h-full rounded-xl">
          <div class="px-6 mb-6">
            <div class="relative w-full h-14 py-4 px-3 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">Search</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="messagesInput1-1" placeholder="Search now..." type="search">
            </div>
          </div>
          <ul>
            <li class="block w-full px-8 py-6 bg-gray-700 border-l-4 border-blue-500">
              <div class="flex mb-4 items-center justify-between">
                <div class="flex items-center">
                  <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-women-messages.png" alt="">
                  <span class="text-blue-50 font-bold">Sarha Jackson</span>
                </div>
                <span class="text-gray-300 font-semibold">01.00</span>
              </div>
              <div class="flex mb-4 items-center justify-between">
                <span class="text-gray-100 font-semibold">Looks amazing! Great stuff 😎</span>
                <span class="inline-flex items-center justify-center w-6 h-6 text-xs text-blue-100 bg-blue-500 rounded-full">2</span>
              </div>
            </li>
            <li class="group block w-full px-8 py-6 hover:bg-gray-700 border-l-4 border-transparent hover:border-blue-500">
              <div class="flex mb-4 items-center justify-between">
                <div class="flex items-center">
                  <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-with-glasses.png" alt="">
                  <span class="text-blue-50 font-bold">John Doe</span>
                </div>
                <span class="text-gray-400 group-hover:text-gray-300 font-semibold">01.00</span>
              </div>
              <div class="text-left">
                <span class="text-gray-300 group-hover:text-gray-100 font-semibold">Looks amazing! Great stuff 😎</span>
              </div>
            </li>
            <li class="group block w-full px-8 py-6 hover:bg-gray-700 border-l-4 border-transparent hover:border-blue-500">
              <div class="flex mb-4 items-center justify-between">
                <div class="flex items-center">
                  <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-with-glasses.png" alt="">
                  <span class="text-blue-50 font-bold">John Doe</span>
                </div>
                <span class="text-gray-400 group-hover:text-gray-300 font-semibold">01.00</span>
              </div>
              <div class="text-left">
                <span class="text-gray-300 group-hover:text-gray-100 font-semibold">Looks amazing! Great stuff 😎</span>
              </div>
            </li>
            <li class="group block w-full px-8 py-6 hover:bg-gray-700 border-l-4 border-transparent hover:border-blue-500">
              <div class="flex mb-4 items-center justify-between">
                <div class="flex items-center">
                  <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-with-glasses.png" alt="">
                  <span class="text-blue-50 font-bold">John Doe</span>
                </div>
                <span class="text-gray-400 group-hover:text-gray-300 font-semibold">01.00</span>
              </div>
              <div class="text-left">
                <span class="text-gray-300 group-hover:text-gray-100 font-semibold">Looks amazing! Great stuff 😎</span>
              </div>
            </li>
            <li class="group block w-full px-8 py-6 hover:bg-gray-700 border-l-4 border-transparent hover:border-blue-500">
              <div class="flex mb-4 items-center justify-between">
                <div class="flex items-center">
                  <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-with-glasses.png" alt="">
                  <span class="text-blue-50 font-bold">John Doe</span>
                </div>
                <span class="text-gray-400 group-hover:text-gray-300 font-semibold">01.00</span>
              </div>
              <div class="text-left">
                <span class="text-gray-300 group-hover:text-gray-100 font-semibold">Looks amazing! Great stuff 😎</span>
              </div>
            </li>
            <li class="group block w-full px-8 py-6 hover:bg-gray-700 border-l-4 border-transparent hover:border-blue-500">
              <div class="flex mb-4 items-center justify-between">
                <div class="flex items-center">
                  <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-with-glasses.png" alt="">
                  <span class="text-blue-50 font-bold">John Doe</span>
                </div>
                <span class="text-gray-400 group-hover:text-gray-300 font-semibold">01.00</span>
              </div>
              <div class="text-left">
                <span class="text-gray-300 group-hover:text-gray-100 font-semibold">Looks amazing! Great stuff 😎</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full xl:w-2/3 px-4">
        <div class="relative p-8 h-full bg-gray-500 rounded-xl">
          <div class="p-6 mb-8 bg-gray-600 rounded-xl">
            <div class="flex flex-wrap items-center justify-between">
              <div class="flex w-full sm:w-auto mb-6 sm:mb-0 items-center">
                <img class="w-12 h-12 mr-4 rounded-full" src="trizzle-assets/images/avatar-women-messages.png" alt="">
                <div>
                  <h5 class="text-gray-50 font-bold">Sahra Jackson</h5>
                  <span class="text-xs text-green-500">Online</span>
                </div>
              </div>
              <div>
                <a class="inline-flex items-center justify-center p-1 w-10 h-10 text-gray-300 bg-gray-700 hover:bg-gray-800 border border-gray-500 rounded-full transition duration-200" href="#">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.5 8.33319L16.2942 6.43652C16.4212 6.37305 16.5623 6.34309 16.7042 6.34948C16.846 6.35587 16.9839 6.39839 17.1047 6.47303C17.2255 6.54766 17.3252 6.65192 17.3944 6.77591C17.4636 6.89991 17.4999 7.03953 17.5 7.18152V12.8182C17.4999 12.9602 17.4636 13.0998 17.3944 13.2238C17.3252 13.3478 17.2255 13.4521 17.1047 13.5267C16.9839 13.6013 16.846 13.6438 16.7042 13.6502C16.5623 13.6566 16.4212 13.6267 16.2942 13.5632L12.5 11.6665V8.33319Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M10.8333 5H4.16667C3.24619 5 2.5 5.74619 2.5 6.66667V13.3333C2.5 14.2538 3.24619 15 4.16667 15H10.8333C11.7538 15 12.5 14.2538 12.5 13.3333V6.66667C12.5 5.74619 11.7538 5 10.8333 5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
                <a class="inline-flex items-center justify-center p-1 w-10 h-10 text-gray-300 bg-gray-700 hover:bg-gray-800 border border-gray-500 rounded-full transition duration-200" href="#">
                  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.16667 1.33337H6.5L8.16667 5.50004L6.08333 6.75004C6.9758 8.55965 8.44039 10.0242 10.25 10.9167L11.5 8.83337L15.6667 10.5V13.8334C15.6667 14.2754 15.4911 14.6993 15.1785 15.0119C14.866 15.3244 14.442 15.5 14 15.5C10.7494 15.3025 7.68346 13.9221 5.38069 11.6194C3.07792 9.31658 1.69754 6.25065 1.5 3.00004C1.5 2.55801 1.67559 2.13409 1.98816 1.82153C2.30072 1.50897 2.72464 1.33337 3.16667 1.33337" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
                <a class="inline-flex items-center justify-center p-1 w-10 h-10 text-gray-300 bg-gray-700 hover:bg-gray-800 border border-gray-500 rounded-full transition duration-200" href="#">
                  <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.00033 8.83341C2.46056 8.83341 2.83366 8.46032 2.83366 8.00008C2.83366 7.53984 2.46056 7.16675 2.00033 7.16675C1.54009 7.16675 1.16699 7.53984 1.16699 8.00008C1.16699 8.46032 1.54009 8.83341 2.00033 8.83341Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M2.00033 14.6667C2.46056 14.6667 2.83366 14.2936 2.83366 13.8333C2.83366 13.3731 2.46056 13 2.00033 13C1.54009 13 1.16699 13.3731 1.16699 13.8333C1.16699 14.2936 1.54009 14.6667 2.00033 14.6667Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M2.00033 3.00004C2.46056 3.00004 2.83366 2.62694 2.83366 2.16671C2.83366 1.70647 2.46056 1.33337 2.00033 1.33337C1.54009 1.33337 1.16699 1.70647 1.16699 2.16671C1.16699 2.62694 1.54009 3.00004 2.00033 3.00004Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div class="mb-64">
            <div class="mb-6 w-full sm:w-72">
              <div class="py-4 pl-4 pr-8 mb-3 bg-gray-600 rounded-2xl">
                <p class="text-xs text-gray-300 leading-normal font-medium">Auctor urna, varius duis suspendisse mi in dictum. Interdum egestas ut porttitor tortor aliquet massa.</p>
              </div>
              <div>
                <span class="text-xs text-gray-50 font-semibold mr-3">Sahra Jackson</span>
                <span class="text-xs font-semibold text-gray-400">08:23 AM</span>
              </div>
            </div>
            <div class="mb-6 w-full sm:w-72 ml-auto">
              <div class="py-4 pl-4 pr-8 mb-3 bg-blue-500 rounded-2xl">
                <p class="text-xs text-blue-50 leading-normal font-medium">Auctor urna, varius duis suspendisse mi in dictum</p>
              </div>
              <div class="text-right">
                <span class="text-xs font-semibold text-gray-400 mr-3">09:00 AM</span>
                <span class="text-xs text-gray-50 font-semibold">You</span>
              </div>
            </div>
            <div class="mb-6 w-full sm:w-72">
              <div class="py-4 pl-4 pr-8 mb-3 bg-gray-600 rounded-2xl">
                <p class="text-xs text-gray-300 leading-normal font-medium">Auctor urna, varius duis suspendisse mi in</p>
              </div>
              <div>
                <span class="text-xs text-gray-50 font-semibold mr-3">Sahra Jackson</span>
                <span class="text-xs font-semibold text-gray-400">08:23 AM</span>
              </div>
            </div>
            <div class="mb-6 w-full sm:w-72 ml-auto">
              <div class="py-4 pl-4 pr-8 mb-3 bg-blue-500 rounded-2xl">
                <p class="text-xs text-blue-50 leading-normal font-medium">Auctor urna, varius duis suspendisse mi in dictum</p>
              </div>
              <div class="text-right">
                <span class="text-xs font-semibold text-gray-400 mr-3">09:00 AM</span>
                <span class="text-xs text-gray-50 font-semibold">You</span>
              </div>
            </div>
          </div>
          <div class="absolute bottom-0 left-0 w-full px-8 mb-8">
            <div>
              <textarea class="block w-full h-20 p-4 mb-6 text-sm font-medium text-gray-200 placeholder-gray-300 bg-gray-600 rounded-xl resize-none outline-none" id="messagesInput1-2" name="" placeholder="Type a message..."></textarea>
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-full sm:w-auto mb-6 sm:mb-0 sm:pl-1">
                  <a class="inline-block mr-4 text-gray-300 hover:text-gray-200" href="#">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 5H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M14 1H4C2.34315 1 1 2.34315 1 4V14C1 15.6569 2.34315 17 4 17H14C15.6569 17 17 15.6569 17 14V4C17 2.34315 15.6569 1 14 1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1 12L5 8.00001C5.45606 7.56117 5.97339 7.33014 6.5 7.33014C7.02661 7.33014 7.54394 7.56117 8 8.00001L13 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M11 11L12 10C12.4561 9.56117 12.9734 9.33014 13.5 9.33014C14.0266 9.33014 14.5439 9.56117 15 10L17 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                  <a class="inline-block mr-4 text-gray-300 hover:text-gray-200" href="#">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7 10.9999C7.32588 11.3325 7.71485 11.5967 8.14413 11.7771C8.57341 11.9575 9.03436 12.0504 9.5 12.0504C9.96564 12.0504 10.4266 11.9575 10.8559 11.7771C11.2852 11.5967 11.6741 11.3325 12 10.9999L16 6.99989C16.663 6.33685 17.0355 5.43757 17.0355 4.49989C17.0355 3.56221 16.663 2.66293 16 1.99989C15.337 1.33685 14.4377 0.964355 13.5 0.964355C12.5623 0.964355 11.663 1.33685 11 1.99989L10.5 2.49989" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M11.0004 6.99973C10.6745 6.66713 10.2855 6.4029 9.85625 6.22252C9.42697 6.04213 8.96602 5.94922 8.50038 5.94922C8.03474 5.94922 7.57378 6.04213 7.1445 6.22252C6.71523 6.4029 6.32626 6.66713 6.00038 6.99973L2.00038 10.9997C1.33734 11.6628 0.964844 12.562 0.964844 13.4997C0.964844 14.4374 1.33734 15.3367 2.00038 15.9997C2.66342 16.6628 3.5627 17.0353 4.50038 17.0353C5.43806 17.0353 6.33734 16.6628 7.00038 15.9997L7.50038 15.4997" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                  <a class="inline-block mr-4 text-gray-300 hover:text-gray-200" href="#">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 8H7.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M13 8H13.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7.5 13C7.82588 13.3326 8.21485 13.5968 8.64413 13.7772C9.07341 13.9576 9.53436 14.0505 10 14.0505C10.4656 14.0505 10.9266 13.9576 11.3559 13.7772C11.7852 13.5968 12.1741 13.3326 12.5 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </div>
                <div class="w-full sm:w-auto">
                  <button class="inline-block w-full sm:w-auto py-2 px-10 text-center text-sm leading-6 text-white font-bold bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-xl">Send</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #140

Tailwind CSS

Trizzle

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-5 py-6">
      <div class="flex items-center justify-center">
        <div class="flex h-8">
          <a x-on:click.prevent="inc > min ? inc -= 5 : min" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-gray-400 hover:text-gray-300 rounded-l-lg" href="#">
            <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.6454 2.99997L3.4154 1.22997C3.50852 1.13629 3.5608 1.00957 3.5608 0.877474C3.5608 0.745381 3.50852 0.618656 3.4154 0.524974C3.36892 0.47811 3.31362 0.440913 3.25269 0.415529C3.19176 0.390144 3.12641 0.377075 3.0604 0.377075C2.99439 0.377075 2.92904 0.390144 2.86811 0.415529C2.80718 0.440913 2.75188 0.47811 2.7054 0.524974L0.585399 2.64497C0.538535 2.69146 0.501338 2.74676 0.475954 2.80769C0.450569 2.86862 0.4375 2.93397 0.4375 2.99997C0.4375 3.06598 0.450569 3.13133 0.475954 3.19226C0.501338 3.25319 0.538535 3.30849 0.585399 3.35497L2.7054 5.49997C2.75212 5.54631 2.80753 5.58298 2.86845 5.60786C2.92936 5.63274 2.9946 5.64536 3.0604 5.64497C3.1262 5.64536 3.19143 5.63274 3.25235 5.60786C3.31327 5.58298 3.36868 5.54631 3.4154 5.49997C3.50852 5.40629 3.5608 5.27957 3.5608 5.14747C3.5608 5.01538 3.50852 4.88866 3.4154 4.79497L1.6454 2.99997Z" fill="currentColor"></path>
            </svg>
          </a>
          <a x-text="inc - 4" x-on:click.prevent="active = inc - 4" :class="{'text-gray-100': active == inc - 4, 'text-gray-400': active !== inc - 4 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-100 font-semibold" href="#">1</a>
          <a x-text="inc - 3" x-on:click.prevent="active = inc - 3" :class="{'text-gray-100': active == inc - 3, 'text-gray-400': active !== inc - 3 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">2</a>
          <a x-text="inc - 2" x-on:click.prevent="active = inc - 2" :class="{'text-gray-100': active == inc - 2, 'text-gray-400': active !== inc - 2 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">3</a>
          <a x-text="inc - 1" x-on:click.prevent="active = inc - 1" :class="{'text-gray-100': active == inc - 1, 'text-gray-400': active !== inc - 1 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">4</a>
          <a x-text="inc" x-on:click.prevent="active = inc" :class="{'text-gray-100': active == inc, 'text-gray-400': active !== inc }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">5</a>
          <a x-on:click.prevent="inc < max ? inc += 5 : max" class="inline-flex items-center justify-center w-8 bg-gray-500 text-gray-400 hover:text-gray-300 rounded-r-lg" href="#">
            <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.3546 3.00003L0.584601 4.77003C0.491475 4.86371 0.439205 4.99043 0.439205 5.12253C0.439205 5.25462 0.491475 5.38134 0.584601 5.47503C0.631083 5.52189 0.686383 5.55909 0.747313 5.58447C0.808242 5.60986 0.873595 5.62293 0.939601 5.62293C1.00561 5.62293 1.07096 5.60986 1.13189 5.58447C1.19282 5.55909 1.24812 5.52189 1.2946 5.47503L3.4146 3.35503C3.46146 3.30854 3.49866 3.25324 3.52405 3.19231C3.54943 3.13138 3.5625 3.06603 3.5625 3.00003C3.5625 2.93402 3.54943 2.86867 3.52405 2.80774C3.49866 2.74681 3.46146 2.69151 3.4146 2.64503L1.2946 0.500026C1.24788 0.453685 1.19247 0.417023 1.13155 0.392141C1.07063 0.367258 1.0054 0.354645 0.9396 0.355026C0.873797 0.354645 0.808566 0.367258 0.747647 0.392141C0.686728 0.417023 0.631321 0.453686 0.5846 0.500026C0.491475 0.593707 0.439204 0.720433 0.439204 0.852526C0.439204 0.984619 0.491475 1.11134 0.584601 1.20503L2.3546 3.00003Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

UI Components – Trizzle Library

Framework

UI Library

Components

Tailwind Component #121

Tailwind Component #122

Tailwind Component #123

Your next website starts here

Tailwind Component #124

Tailwind Component #125

Tailwind Component #126

Tailwind Component #127

Tailwind Component #128

Tailwind Component #129

Tailwind Component #130

Tailwind Component #131

Tailwind Component #132

Tailwind Component #133

Tailwind Component #134

Tailwind Component #135

Tailwind Component #136

Tailwind Component #137

Tailwind Component #138

Tailwind Component #139

Tailwind Component #140

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company