Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
AdminKit Asteria Dashboard Horizon UI Dashboard Riva Dashboard Tailwind Soft UI Design System Motion Landing Library Chakra UI Dashboard Motion Landing Library React Argon Dashboard Soft UI Dashboard Soft UI Dashboard Tailwind
All 72
Sidebars 4
Components 16
Cards Section 4
Forms 4
Navbars 4
Tables Section 2
Typography 7
Teams Section 2
Profiles Section 3
Tables 4
Cards 11
Projects Section 2
Charts 5
Headers 2
Charts Section 2

Tailwind Components - Riva Dashboard Tailwind

Discover 16 Tailwind Components available in Riva Dashboard Tailwind

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>

Checkbox

Component from Riva Dashboard Tailwind Builder 
<div class="flex items-center primary-checkbox draggable">
    <input checked="" id="checked-checkbox" type="checkbox" value="" class="h-5 w-5 rounded-md text-primary border border-gray-200 checked:border-primary bg-gray-100">
    <label for="checked-checkbox" class="ml-2 font-medium text-gray-900">
    Checkbox
    </label>
</div>

Radio

Component from Riva Dashboard Tailwind Builder 
<div class="flex items-center draggable">
    <input checked="" id="default-radio-2" type="radio" value="" name="default-radio" class="w-5 h-5 text-primary border-gray-100">
    <label for="default-radio-2" class="ml-2 text-gray-900 font-medium">Radio</label>
</div>

Button Fill

Component from Riva Dashboard Tailwind Builder 
<button class="mr-2 inline-block text-[0.925rem] font-medium leading-normal text-center align-middle cursor-pointer rounded-[.95rem] transition-colors duration-150 ease-in-out text-white bg-dark shadow-none border-0 px-5 py-3 hover:bg-dark-dark active:bg-dark-dark focus:bg-dark-dark draggable">Button</button>

Button Icon Only

Component from Riva Dashboard Tailwind Builder 
<button class="flex items-center justify-center w-12 h-12 text-base font-medium leading-normal text-center text-white align-middle transition-colors duration-150 ease-in-out border-0 shadow-none cursor-pointer rounded-2xl bg-dark hover:bg-dark-dark active:bg-dark-dark focus:bg-dark-dark">
    <i class="fas fa-check text-gray-100"></i>
</button>

Input

Component from Riva Dashboard Tailwind Builder 
<input type="text" name="Name" id="Name" value="" class="peer w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your full name" required="">

Switch

Component from Riva Dashboard Tailwind Builder 
<label class="relative inline-flex items-center cursor-pointer draggable">
    <input type="checkbox" value="" class="sr-only peer" checked="">
    <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[1.5px] after:bg-white after:border-gray-200 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary peer-checked:after:border-primary"></div>
    <span class="ml-3 font-medium text-gray-600">Switch</span>
</label>

Avatar

Component from Riva Dashboard Tailwind Builder 
<div class="rounded-full relative cursor-pointer shrink-0 draggable">
    <img alt="Pic" class="w-[40px] h-[40px] rounded-full inline-block shrink-0 border-2 border-white/50" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar1.jpg">
</div>