

Soft UI Dashboard Tailwind Components
Discover 44 components available in Soft UI Dashboard Tailwind
Button Icon
Card Bg Image
Section Card Billing
Table Authors

<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>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">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">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">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">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>
<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>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">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">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">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">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 Projects Architecture

<div class="flex-none w-full max-w-full px-3 mb-4 draggable">
<div class="relative flex flex-col min-w-0 mb-6 break-words bg-white border-0 shadow-soft-xl rounded-2xl bg-clip-border">
<div class="p-4 pb-0 mb-0 bg-white rounded-t-2xl">
<h6 class="mb-1">Projects</h6>
<p class="leading-normal text-sm">Architects design houses</p>
</div>
<div class="flex-auto p-4">
<div class="flex flex-wrap -mx-3">
<div class="w-full max-w-full px-3 mb-6 md:w-6/12 md:flex-none xl:mb-0 xl:w-3/12">
<div class="relative flex flex-col min-w-0 break-words bg-transparent border-0 shadow-none rounded-2xl bg-clip-border">
<div class="relative">
<a class="block shadow-xl rounded-2xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/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-slate-700 text-sm bg-clip-text">Project #2</p>
<a href="javascript:;">
<h5>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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-1.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(467.5px, 1400.5px, 0px);"> Elena Morison <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-2.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(479.5px, 1400.5px, 0px);"> Ryan Milly <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-3.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(492px, 1400.5px, 0px);"> Nick Daniel <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-4.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(451.5px, 1429px, 0px);"> Peterson <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full max-w-full px-3 mb-6 md:w-6/12 md:flex-none xl:mb-0 xl:w-3/12">
<div class="relative flex flex-col min-w-0 break-words bg-transparent border-0 shadow-none rounded-2xl bg-clip-border">
<div class="relative">
<a class="block shadow-xl rounded-2xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/home-decor-2.jpg" alt="img-blur-shadow" class="max-w-full shadow-soft-2xl rounded-xl">
</a>
</div>
<div class="flex-auto px-1 pt-6">
<p class="relative z-10 mb-2 leading-normal text-transparent bg-slate-700 text-sm bg-clip-text">Project #1</p>
<a href="javascript:;">
<h5>Scandinavian</h5>
</a>
<p class="mb-6 leading-normal text-sm">Music is something that every person has his or her own specific opinion about.</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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-3.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(692px, 1400.5px, 0px);"> Nick Daniel <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-4.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(704px, 1400.5px, 0px);"> Peterson <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-1.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(716.5px, 1400.5px, 0px);"> Elena Morison <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-2.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(676px, 1429px, 0px);"> Ryan Milly <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full max-w-full px-3 mb-6 md:w-6/12 md:flex-none xl:mb-0 xl:w-3/12">
<div class="relative flex flex-col min-w-0 break-words bg-transparent border-0 shadow-none rounded-2xl bg-clip-border">
<div class="relative">
<a class="block shadow-xl rounded-2xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/home-decor-3.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-slate-700 text-sm bg-clip-text">Project #3</p>
<a href="javascript:;">
<h5>Minimalist</h5>
</a>
<p class="mb-6 leading-normal text-sm">Different people have different taste, and various types of music.</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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-4.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(916.5px, 1400.5px, 0px);"> Peterson <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-3.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(928.5px, 1400.5px, 0px);"> Nick Daniel <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-2.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(941px, 1400.5px, 0px);"> Ryan Milly <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-1.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(900.5px, 1429px, 0px);"> Elena Morison <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full max-w-full px-3 mb-6 md:w-6/12 md:flex-none xl:mb-0 xl:w-3/12">
<div class="relative flex flex-col h-full min-w-0 break-words bg-transparent border border-solid shadow-none rounded-2xl border-slate-100 bg-clip-border">
<div class="flex flex-col justify-center flex-auto p-6 text-center">
<a href="javascript:;">
<i class="mb-4 fa fa-plus text-slate-400" aria-hidden="true"></i>
<h5 class="text-slate-400 text-lg mb-0">New project</h5>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-none w-full max-w-full px-3 mb-4 draggable">
<div class="relative flex flex-col min-w-0 mb-6 break-words bg-white border-0 shadow-soft-xl rounded-2xl bg-clip-border">
<div class="p-4 pb-0 mb-0 bg-white rounded-t-2xl">
<h6 class="mb-1">Projects</h6>
<p class="leading-normal text-sm">Architects design houses</p>
</div>
<div class="flex-auto p-4">
<div class="flex flex-wrap -mx-3">
<div class="w-full max-w-full px-3 mb-6 md:w-6/12 md:flex-none xl:mb-0 xl:w-3/12">
<div class="relative flex flex-col min-w-0 break-words bg-transparent border-0 shadow-none rounded-2xl bg-clip-border">
<div class="relative">
<a class="block shadow-xl rounded-2xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/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-slate-700 text-sm bg-clip-text">Project #2</p>
<a href="javascript:;">
<h5>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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-1.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(467.5px, 1400.5px, 0px);"> Elena Morison <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-2.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(479.5px, 1400.5px, 0px);"> Ryan Milly <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-3.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(492px, 1400.5px, 0px);"> Nick Daniel <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-4.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(451.5px, 1429px, 0px);"> Peterson <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full max-w-full px-3 mb-6 md:w-6/12 md:flex-none xl:mb-0 xl:w-3/12">
<div class="relative flex flex-col min-w-0 break-words bg-transparent border-0 shadow-none rounded-2xl bg-clip-border">
<div class="relative">
<a class="block shadow-xl rounded-2xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/home-decor-2.jpg" alt="img-blur-shadow" class="max-w-full shadow-soft-2xl rounded-xl">
</a>
</div>
<div class="flex-auto px-1 pt-6">
<p class="relative z-10 mb-2 leading-normal text-transparent bg-slate-700 text-sm bg-clip-text">Project #1</p>
<a href="javascript:;">
<h5>Scandinavian</h5>
</a>
<p class="mb-6 leading-normal text-sm">Music is something that every person has his or her own specific opinion about.</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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-3.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(692px, 1400.5px, 0px);"> Nick Daniel <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-4.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(704px, 1400.5px, 0px);"> Peterson <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-1.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(716.5px, 1400.5px, 0px);"> Elena Morison <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-2.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(676px, 1429px, 0px);"> Ryan Milly <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full max-w-full px-3 mb-6 md:w-6/12 md:flex-none xl:mb-0 xl:w-3/12">
<div class="relative flex flex-col min-w-0 break-words bg-transparent border-0 shadow-none rounded-2xl bg-clip-border">
<div class="relative">
<a class="block shadow-xl rounded-2xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/home-decor-3.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-slate-700 text-sm bg-clip-text">Project #3</p>
<a href="javascript:;">
<h5>Minimalist</h5>
</a>
<p class="mb-6 leading-normal text-sm">Different people have different taste, and various types of music.</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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-4.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(916.5px, 1400.5px, 0px);"> Peterson <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-3.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(928.5px, 1400.5px, 0px);"> Nick Daniel <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-2.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(941px, 1400.5px, 0px);"> Ryan Milly <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<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" data-target="tooltip_trigger" data-placement="bottom">
<img class="w-full rounded-circle" alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-1.jpg">
</a>
<div data-target="tooltip" class="hidden px-2 py-1 text-white bg-black rounded-lg text-sm" role="tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(900.5px, 1429px, 0px);"> Elena Morison <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full max-w-full px-3 mb-6 md:w-6/12 md:flex-none xl:mb-0 xl:w-3/12">
<div class="relative flex flex-col h-full min-w-0 break-words bg-transparent border border-solid shadow-none rounded-2xl border-slate-100 bg-clip-border">
<div class="flex flex-col justify-center flex-auto p-6 text-center">
<a href="javascript:;">
<i class="mb-4 fa fa-plus text-slate-400" aria-hidden="true"></i>
<h5 class="text-slate-400 text-lg mb-0">New project</h5>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Card Stats

<div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border mb-4 draggable">
<div class="flex-auto p-4">
<div class="flex flex-row -mx-3">
<div class="flex-none w-2/3 max-w-full px-3">
<div>
<p class="mb-0 font-sans font-semibold leading-normal text-sm">Today's Money</p>
<h5 class="mb-0 font-bold"> $53,000 <span class="leading-normal text-sm font-weight-bolder text-lime-500">+55%</span>
</h5>
</div>
</div>
<div class="px-3 text-right basis-1/3">
<div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl">
<i class="ni ni-money-coins leading-none text-lg relative top-3.5 text-white"></i>
</div>
</div>
</div>
</div>
</div>
<div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border mb-4 draggable">
<div class="flex-auto p-4">
<div class="flex flex-row -mx-3">
<div class="flex-none w-2/3 max-w-full px-3">
<div>
<p class="mb-0 font-sans font-semibold leading-normal text-sm">Today's Money</p>
<h5 class="mb-0 font-bold"> $53,000 <span class="leading-normal text-sm font-weight-bolder text-lime-500">+55%</span>
</h5>
</div>
</div>
<div class="px-3 text-right basis-1/3">
<div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl">
<i class="ni ni-money-coins leading-none text-lg relative top-3.5 text-white"></i>
</div>
</div>
</div>
</div>
</div>
Typography P

<p class="draggable">Use our Tailwind CSS paragraph example for displaying long text. </p>
<p class="draggable">Use our Tailwind CSS paragraph example for displaying long text. </p>
Typography H1
Section Teams Simple
Input

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