Tailwind - All Components

Discover 213 Tailwind components available in Loopple

Progress

Component from Soft UI Dashboard Tailwind Builder
<div class="w-full mb-4 draggable">
  <div class="flex mb-2">
    <span class="mr-2 font-semibold leading-normal capitalize text-sm">default progress</span>
    <span class="ml-auto font-semibold leading-normal text-sm">50%</span>
  </div>
  <div>
    <div class="h-0.75 text-xs flex overflow-visible rounded-lg bg-gray-200">
      <div class="bg-fuchsia-500 w-1/2 transition-width duration-600 ease-soft rounded-1 -mt-0.38 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap text-center text-white"></div>
    </div>
  </div>
</div>

Card Project

Component from Soft UI Dashboard Tailwind Builder
<div class="relative flex flex-col min-w-0 break-words bg-white border-0 shadow-soft-xl px-3 py-3 rounded-2xl bg-clip-border">
    <div class="relative">
      <a class="block shadow-xl rounded-2xl">
        <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/home-decor-1.jpg" alt="img-blur-shadow" class="max-w-full shadow-soft-2xl rounded-2xl" />
      </a>
    </div>
    <div class="flex-auto px-1 pt-6">
      <p class="relative z-10 mb-2 leading-normal text-transparent bg-gradient-to-tl from-gray-900 to-slate-800 opacity-60 text-sm bg-clip-text">Project #2</p>
      <a href="javascript:;">
        <h5 class="font-display">Modern</h5>
      </a>
      <p class="mb-6 leading-normal text-sm">As Uber works through a huge amount of internal management turmoil.</p>
      <div class="flex items-center justify-between">
        <button type="button" class="inline-block px-8 py-2 mb-0 font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg shadow-none cursor-pointer leading-pro ease-soft-in text-xs hover:scale-102 active:shadow-soft-xs tracking-tight-soft border-fuchsia-500 text-fuchsia-500 hover:border-fuchsia-500 hover:bg-transparent hover:text-fuchsia-500 hover:opacity-75 hover:shadow-none active:bg-fuchsia-500 active:text-white active:hover:bg-transparent active:hover:text-fuchsia-500">View Project</button>
        <div class="mt-2">
          <a href="javascript:;" class="relative z-20 inline-flex items-center justify-center w-6 h-6 text-white transition-all duration-200 border-2 border-white border-solid ease-soft-in-out text-xs rounded-circle hover:z-30">
            <img class="w-full rounded-circle" alt="Image placeholder" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/team-1.jpg" />
          </a>
          <a href="javascript:;" class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid ease-soft-in-out text-xs rounded-circle hover:z-30">
            <img class="w-full rounded-circle" alt="Image placeholder" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/team-2.jpg" />
          </a>
          <a href="javascript:;" class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid ease-soft-in-out text-xs rounded-circle hover:z-30">
            <img class="w-full rounded-circle" alt="Image placeholder" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/team-3.jpg" />
          </a>
          <a href="javascript:;" class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid ease-soft-in-out text-xs rounded-circle hover:z-30">
            <img class="w-full rounded-circle" alt="Image placeholder" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-dashboard/assets/img/team-4.jpg" />
          </a>
        </div>
      </div>
    </div>
  </div>

Button

Component from Soft UI Dashboard Tailwind Builder
<button type="button" class="inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl from-purple-700 to-pink-500 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 hover:scale-102 active:opacity-85 hover:shadow-soft-xs draggable mb-4">Button</button>

Table Authors

Component from Soft UI Dashboard Tailwind Builder
<div class="relative flex flex-col w-full min-w-0 mb-0 break-words bg-white border-0 border-transparent border-solid shadow-soft-xl rounded-2xl bg-clip-border mb-4 draggable">
  <div class="p-6 pb-0 mb-0 bg-white rounded-t-2xl">
    <h6 class="font-display">Authors table</h6>
  </div>
  <div class="flex-auto px-0 pt-0 pb-2">
    <div class="p-0 overflow-x-auto">
      <table class="items-center w-full mb-0 align-top border-gray-200 text-slate-500">
        <thead class="align-bottom">
          <tr>
            <th class="px-6 py-3 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Author</th>
            <th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Function</th>
            <th class="px-6 py-3 font-bold text-center uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Status</th>
            <th class="px-6 py-3 font-bold text-center uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Employed</th>
            <th class="px-6 py-3 font-semibold capitalize align-middle bg-transparent border-b border-gray-200 border-solid shadow-none tracking-none whitespace-nowrap text-slate-400 opacity-70"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <div class="flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-2.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user1" />
                </div>
                <div class="flex flex-col justify-center">
                  <h6 class="mb-0 leading-normal text-sm font-display">John Michael</h6>
                  <p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
                </div>
              </div>
            </td>
            <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <p class="mb-0 font-semibold leading-tight text-xs">Manager</p>
              <p class="mb-0 leading-tight text-xs text-slate-400">Organization</p>
            </td>
            <td class="p-2 leading-normal text-center align-middle bg-transparent border-b text-sm whitespace-nowrap shadow-transparent">
              <span class="bg-gradient-to-tl from-green-600 to-lime-400 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Online</span>
            </td>
            <td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <span class="font-semibold leading-tight text-xs text-slate-400">23/04/18</span>
            </td>
            <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
            </td>
          </tr>
          <tr>
            <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <div class="flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-3.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user2" />
                </div>
                <div class="flex flex-col justify-center">
                  <h6 class="mb-0 leading-normal text-sm font-display">Alexa Liras</h6>
                  <p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
                </div>
              </div>
            </td>
            <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <p class="mb-0 font-semibold leading-tight text-xs">Programator</p>
              <p class="mb-0 leading-tight text-xs text-slate-400">Developer</p>
            </td>
            <td class="p-2 leading-normal text-center align-middle bg-transparent border-b text-sm whitespace-nowrap shadow-transparent">
              <span class="bg-gradient-to-tl from-slate-600 to-slate-300 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Offline</span>
            </td>
            <td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <span class="font-semibold leading-tight text-xs text-slate-400">11/01/19</span>
            </td>
            <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
            </td>
          </tr>
          <tr>
            <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <div class="flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-4.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user3" />
                </div>
                <div class="flex flex-col justify-center">
                  <h6 class="mb-0 leading-normal text-sm font-display">Laurent Perrier</h6>
                  <p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
                </div>
              </div>
            </td>
            <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <p class="mb-0 font-semibold leading-tight text-xs">Executive</p>
              <p class="mb-0 leading-tight text-xs text-slate-400">Projects</p>
            </td>
            <td class="p-2 leading-normal text-center align-middle bg-transparent border-b text-sm whitespace-nowrap shadow-transparent">
              <span class="bg-gradient-to-tl from-green-600 to-lime-400 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Online</span>
            </td>
            <td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <span class="font-semibold leading-tight text-xs text-slate-400">19/09/17</span>
            </td>
            <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
              <a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
            </td>
          </tr>
          <tr>
            <td class="p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
              <div class="flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-1.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user6" />
                </div>
                <div class="flex flex-col justify-center">
                  <h6 class="mb-0 leading-normal text-sm font-display">Miriam Eric</h6>
                  <p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
                </div>
              </div>
            </td>
            <td class="p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
              <p class="mb-0 font-semibold leading-tight text-xs">Programtor</p>
              <p class="mb-0 leading-tight text-xs text-slate-400">Developer</p>
            </td>
            <td class="p-2 leading-normal text-center align-middle bg-transparent border-b-0 text-sm whitespace-nowrap shadow-transparent">
              <span class="bg-gradient-to-tl from-green-600 to-lime-400 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Online</span>
            </td>
            <td class="p-2 text-center align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
              <span class="font-semibold leading-tight text-xs text-slate-400">14/09/20</span>
            </td>
            <td class="p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
              <a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Section Profile Cards

Typography H4

Section Tables With Timeline

Card Statement

Input With Icon

Section Card Stats Dark