Tailwind Components

Discover 23 Tailwind Components available in Loopple

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>

Input

Component from Soft UI Dashboard Tailwind Builder
<input type="text" placeholder="Default input" class="focus:shadow-soft-primary-outline text-sm leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-2 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none mb-4 draggable"></input>

Button Outline

Component from Soft UI Dashboard Tailwind Builder
<button type="button" class="inline-block px-6 py-3 mr-3 font-bold text-center uppercase align-middle transition-all bg-transparent border rounded-lg cursor-pointer border-fuchsia-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 text-fuchsia-500 mb-4 draggable">Button</button>

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>

Button Icon

Input With Icon

Button Link

Button Outline

Component from Riva Dashboard Tailwind Builder
<button class="border border-dark border-dashed text-dark text-sm py-2.5 px-5 rounded-xl hover:border-dark hover:text-dark hover:bg-darkLight transition duration-300 draggable">
    Button
</button>

Avatar Text

Component from Riva Dashboard Tailwind Builder
<div class="rounded-full relative cursor-pointer shrink-0 draggable">
    <span class="relative flex items-center justify-center text-sm font-semibold bg-dark text-secondary border-2 border-white/50 w-[40px] h-[40px] rounded-full shrink-0">RT</span>
</div>

Tab Navigation

Component from Riva Dashboard Tailwind Builder
<div nav-tabs="" class="relative flex gap-4 min-w-0 break-words group/tabs bg-clip-border rounded-2xl border-stone-200 mb-5 draggable active-all">
      <div class="text-lg group-[.active-all]/tabs:border-b-[2px] group-[.active-all]/tabs:border-warning group-[.active-all]/tabs:text-dark font-semibold pb-3 cursor-pointer text-muted" aria-controls="all"> Menu 1 </div>
      <div class="text-lg group-[.active-pending]/tabs:border-b-[2px] group-[.active-pending]/tabs:border-warning group-[.active-pending]/tabs:text-dark font-semibold pb-3 cursor-pointer text-muted" aria-controls="menu2"> Menu 2 </div>
</div>