UI Components Library

Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer

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>

Card Projects

Component from Riva Dashboard Tailwind Builder

PRO Component

Card Stats

Component from Chakra UI Dashboard Builder

<Card data-type='Card'
              overflow='hidden'
              variant='outline'
              >
<CardBody data-type='CardBody'>
              <Stat data-type='Stat'>
               <StatLabel data-type='StatLabel'>Sent</StatLabel>
               <StatNumber data-type='StatNumber'>345,670</StatNumber>
               <StatHelpText data-type='StatHelpText'>
                 <StatArrow data-type='StatArrow' type='increase'></StatArrow>
                 23.36%
               </StatHelpText>
             </Stat>
</CardBody>
            </Card>

Input Outline

Component from Chakra UI Dashboard Builder

Divider

Component from Chakra UI Dashboard Builder

Team Section With Large Images

Component from Motion Landing Library React Builder

PRO Component

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>

Faq With Cards

Component from Motion Landing Library Builder

PRO Component

Contact Us Section With Colored Cards

Component from Motion Landing Library Builder

PRO Component

Avatar Image

Component from Chakra UI Dashboard Builder