Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard AdminKit Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Riva Dashboard Tailwind Motion Landing Library React Soft UI Design System Argon Dashboard Soft UI Dashboard Tailwind
All 217
Headers 12
Testimonials 7
Logo Areas 6
Stats 6
Http Codes 4
Navbars 13
Pricing 6
Contact Us 6
Faq 6
Teams 7
Features 6
Call To Actions 8
Authentication 5
Blogs 4
General 1
Contents 6
Sidebars 6
Components 23
Cards Section 8
Forms 7
Tables Section 3
Typography 14
Teams Section 3
Profiles Section 5
Tables 8
Cards 17
Projects Section 3
Charts 7
Charts Section 3

Tailwind - All Components

Discover 217 Tailwind components available in Loopple

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>

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>

Cards Socials

Component from Riva Dashboard Tailwind Builder 
<div class="flex flex-wrap -mx-3 mb-5 removable">
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
        <div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
            <!-- card body  -->
            <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
                <div class="m-0">
                    <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/instagram.svg" alt="youtube">
                </div>
                <div class="flex flex-col my-7">
                    <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">590k</h3>
                    <div class="m-0">
                        <span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-success bg-success-light border border-success">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
                    </svg>
                    2.86%
                </span>
            </div>
            <!-- end card body  -->
        </div>
    </div>
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
        <div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
            <!-- card body  -->
            <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
                <div class="m-0">
                    <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/youtube.svg" alt="youtube">
                </div>
                <div class="flex flex-col my-7">
                    <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">58k</h3>
                    <div class="m-0">
                        <span class="font-medium text-secondary-dark text-lg/normal">Subscribers</span>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-success bg-success-light border border-success">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
                    </svg>
                    7%
                </span>
            </div>
            <!-- end card body  -->
        </div>
    </div>
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
        <div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
            <!-- card body  -->
            <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
                <div class="m-0">
                    <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/facebook.svg" alt="youtube">
                </div>
                <div class="flex flex-col my-7">
                    <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">896k</h3>
                    <div class="m-0">
                        <span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-danger bg-danger-light border border-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181"></path>
                    </svg>
                    1.12%
                </span>
            </div>
            <!-- end card body  -->
        </div>
    </div>
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
        <div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
            <!-- card body  -->
            <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
                <div class="m-0">
                    <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/twitter.svg" alt="youtube">
                </div>
                <div class="flex flex-col my-7">
                    <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">77k</h3>
                    <div class="m-0">
                        <span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-success bg-success-light border border-success">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
                    </svg>
                    9.4%
                </span>
            </div>
            <!-- end card body  -->
        </div>
    </div>
</div>

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>

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="">

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>

Typography P

Component from Riva Dashboard Tailwind Builder 
<p class="draggable">Riva Pharagraph</p>

Profile Section With Image

Component from Riva Dashboard Tailwind Builder 
<div class="relative flex flex-col w-full min-w-0 mb-6 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable">
  <!-- card body -->
  <div class="px-9 pt-9 flex-auto min-h-[70px] pb-0 bg-transparent">
    <div class="flex flex-wrap mb-6 xl:flex-nowrap">
      <div class="mb-5 mr-5">
        <div class="relative inline-block shrink-0 rounded-2xl">
          <img class="inline-block shrink-0 rounded-2xl w-[80px] h-[80px] lg:w-[160px] lg:h-[160px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar1.jpg" alt="image" />
          <div class="group/tooltip relative">
            <span class="w-[15px] h-[15px] absolute bg-success rounded-full bottom-0 end-0 -mb-1 -mr-2  border border-white"></span>
            <span class="text-xs absolute z-10 transition-opacity duration-300 ease-in-out px-3 py-2 whitespace-nowrap text-center transform bg-white rounded-2xl shadow-sm bottom-0 -mb-2 start-full ml-4 font-medium text-secondary-inverse group-hover/tooltip:opacity-100 opacity-0 block"> Status: Active </span>
          </div>
        </div>
      </div>
      <div class="grow">
        <div class="flex flex-wrap items-start justify-between mb-2">
          <div class="flex flex-col">
            <div class="flex items-center mb-2">
              <a class="text-secondary-inverse hover:text-primary transition-colors duration-200 ease-in-out font-semibold text-[1.5rem] mr-1" href="javascript:void(0)"> Alec Jhonson </a>
            </div>
            <div class="flex flex-wrap pr-2 mb-4 font-medium">
              <a class="flex items-center mb-2 mr-5 text-secondary-dark hover:text-primary" href="javascript:void(0)">
                <span class="mr-1">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                    <path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
                  </svg>
                </span> New York, NY </a>
              <a class="flex items-center mb-2 mr-5 text-secondary-dark hover:text-primary" href="javascript:void(0)">
                <span class="mr-1">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                    <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
                    <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
                  </svg>
                </span> [email protected] </a>
            </div>
          </div>
          <div class="flex flex-wrap my-auto">
            <a href="javascript:void(0)" class="inline-block px-6 py-3 mr-3 text-base font-medium leading-normal text-center align-middle transition-colors duration-150 ease-in-out border-0 shadow-none cursor-pointer rounded-2xl text-muted bg-light border-light hover:bg-light-dark active:bg-light-dark focus:bg-light-dark "> Follow </a>
            <a href="javascript:void(0)" class="inline-block px-6 py-3 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-primary hover:bg-primary-dark active:bg-primary-dark focus:bg-primary-dark "> Hire </a>
          </div>
        </div>
        <div class="flex flex-wrap justify-between">
          <div class="flex flex-wrap items-center">
            <a href="javascript:void(0)" class="mr-3 mb-2 inline-flex items-center justify-center text-secondary-inverse rounded-full bg-neutral-100 hover:bg-neutral-200 transition-all duration-200 ease-in-out px-3 py-1 text-sm font-medium leading-normal"> 320 Following </a>
            <a href="javascript:void(0)" class="mr-3 mb-2 inline-flex items-center justify-center text-secondary-inverse rounded-full bg-neutral-100 hover:bg-neutral-200 transition-all duration-200 ease-in-out px-3 py-1 text-sm font-medium leading-normal"> 2.5k Followers </a>
            <a href="javascript:void(0)" class="mr-3 mb-2 inline-flex items-center justify-center text-secondary-inverse rounded-full bg-neutral-100 hover:bg-neutral-200 transition-all duration-200 ease-in-out px-3 py-1 text-sm font-medium leading-normal"> 48 Deals </a>
          </div>
        </div>
      </div>
    </div>
    <hr class="w-full h-px border-neutral-200">
    <ul nav-tabs class="group flex flex-wrap items-stretch text-[1.15rem] font-semibold list-none border-b-2 border-transparent border-solid active-assignments">
      <li class="flex mt-2 -mb-[2px]">
        <a aria-controls="summary" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-summary]:border-primary group-[.active-summary]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> Summary </a>
      </li>
      <li class="flex mt-2 -mb-[2px]">
        <a aria-controls="assignments" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-assignments]:border-primary group-[.active-assignments]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> Assignments </a>
      </li>
      <li class="flex mt-2 -mb-[2px]">
        <a aria-controls="marketing" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-marketing]:border-primary group-[.active-marketing]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> Marketing </a>
      </li>
      <li class="flex mt-2 -mb-[2px]">
        <a aria-controls="followers" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-followers]:border-primary group-[.active-followers]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> Followers </a>
      </li>
      <li class="flex mt-2 -mb-[2px] group">
        <a aria-controls="history" class="py-5 mr-1 sm:mr-3 lg:mr-10 transition-colors duration-200 ease-in-out border-b-2 border-transparent group-[.active-history]:border-primary group-[.active-history]:text-primary text-muted hover:border-primary" href="javascript:void(0)"> History </a>
      </li>
    </ul>
  </div>
</div>

Card Social

Component from Riva Dashboard Tailwind Builder 
<div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable">
  <!-- card body  -->
  <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
    <div class="m-0">
      <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/twitter.svg" alt="Logo Twitter">
    </div>
    <div class="flex flex-col my-7">
      <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">1.3k</h3>
      <div class="m-0">
        <span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
      </div>
    </div>
    <span class="text-center align-baseline inline-flex px-2 py-1 mr-auto items-center font-semibold text-base/none text-success bg-success-light rounded-lg border border-success">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
      </svg> 12% </span>
  </div>
  <!-- end card body  -->
</div>

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>