Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
Projects Section - All Examples
Discover 14 Projects Section examples available in Loopple
Section Projects Cards
Component from
Asteria Dashboard
Builder
<div class="row removable mt-4">
<div class="col-12 col-xl-4 drop-zone">
<div class="card draggable mb-4" draggable="true">
<div class="card-header p-3 pb-0">
<div class="row">
<div class="col-8 d-flex">
<div>
<img src="https://images.unsplash.com/photo-1553640582-f9d3a73acb6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDU2fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Lucas Prila</h6>
<p class="text-xs"><b>Fixed price</b> - posted 2h ago</p>
</div>
</div>
<div class="col-4">
<span class="badge bg-gradient-info ms-auto float-end">NEW</span>
</div>
</div>
</div>
<div class="card-body p-3 pt-1">
<h6>Ruby developer needed.</h6>
<p class="text-sm">The website was initially built in PHP, I need a professional ruby programmer to shift it.</p>
<div class="d-flex bg-gray-100 border-radius-lg p-3">
<h4 class="my-auto">
<span class="text-secondary text-sm me-1">$</span>3,000<span class="text-secondary text-sm ms-1">/ month </span>
</h4>
<a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone">
<div class="card draggable mb-4" draggable="true">
<div class="card-header p-3 pb-0">
<div class="row">
<div class="col-8 d-flex">
<div>
<img src="https://images.unsplash.com/photo-1561828970-daff2303fe58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDU4fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Miriam Jhonson</h6>
<p class="text-xs"><b>Hourly</b> - posted 3h ago</p>
</div>
</div>
</div>
</div>
<div class="card-body p-3 pt-1">
<h6>Website redesign needed.</h6>
<p class="text-sm">We would like a progressive designer to create website designs for our new corporate website.</p>
<div class="d-flex bg-gray-100 border-radius-lg p-3">
<h4 class="my-auto">
<span class="text-secondary text-sm me-1">$</span>24,5<span class="text-secondary text-sm ms-1">/ hour </span>
</h4>
<a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone">
<div class="card draggable mb-4" draggable="true">
<div class="card-header p-3 pb-0">
<div class="row">
<div class="col-8 d-flex">
<div>
<img src="https://images.unsplash.com/photo-1630594384259-aa5b88fb4a2a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjIyfHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Andrew Michael</h6>
<p class="text-xs"><b>Hourly</b> - posted 4h ago</p>
</div>
</div>
</div>
</div>
<div class="card-body p-3 pt-1">
<h6>Looking for a Three.js Developer.</h6>
<p class="text-sm">I'm looking for an expert three.js developer to develop our website.</p>
<div class="d-flex bg-gray-100 border-radius-lg p-3">
<h4 class="my-auto">
<span class="text-secondary text-sm me-1">$</span>15<span class="text-secondary text-sm ms-1">/ hour </span>
</h4>
<a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
</div>
</div>
</div>
</div>
</div>Section Projects
Component from
Soft UI Dashboard
Builder
<div class="row removable mt-4">
<div class="col-12 drop-zone">
<div class="card mb-4">
<div class="card-header pb-0 p-3">
<h6 class="mb-1">Projects</h6>
<p class="text-sm">Architects design houses</p>
</div>
<div class="card-body p-3">
<div class="row">
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
<div class="card card-blog card-plain draggable">
<div class="position-relative">
<a class="d-block shadow-xl border-radius-xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/home-decor-1.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-xl">
</a>
</div>
<div class="card-body px-1 pb-0">
<p class="text-gradient text-dark mb-2 text-sm">Project #2</p>
<a href="javascript:;">
<h5>
Modern
</h5>
</a>
<p class="mb-4 text-sm">
As Uber works through a huge amount of internal management turmoil.
</p>
<div class="d-flex align-items-center justify-content-between">
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Elena Morison">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Milly">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-2.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Nick Daniel">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Peterson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4 drop-zone">
<div class="card card-blog card-plain draggable">
<div class="position-relative">
<a class="d-block shadow-xl border-radius-xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/home-decor-2.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
</a>
</div>
<div class="card-body px-1 pb-0">
<p class="text-gradient text-dark mb-2 text-sm">Project #1</p>
<a href="javascript:;">
<h5>
Scandinavian
</h5>
</a>
<p class="mb-4 text-sm">
Music is something that every person has his or her own specific opinion about.
</p>
<div class="d-flex align-items-center justify-content-between">
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Nick Daniel">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Peterson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Elena Morison">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Milly">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-2.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4 drop-zone">
<div class="card card-blog card-plain draggable">
<div class="position-relative">
<a class="d-block shadow-xl border-radius-xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/home-decor-3.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-xl">
</a>
</div>
<div class="card-body px-1 pb-0">
<p class="text-gradient text-dark mb-2 text-sm">Project #3</p>
<a href="javascript:;">
<h5>
Minimalist
</h5>
</a>
<p class="mb-4 text-sm">
Different people have different taste, and various types of music.
</p>
<div class="d-flex align-items-center justify-content-between">
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Peterson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Nick Daniel">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Milly">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-2.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Elena Morison">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4 drop-zone">
<div class="card h-100 card-plain border draggable">
<div class="card-body d-flex flex-column justify-content-center text-center">
<a href="javascript:;">
<i class="fa fa-plus text-secondary mb-3" aria-hidden="true"></i>
<h5 class=" text-secondary"> New project </h5>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Section Project
Component from
Adminkit
Builder
<div class="row removable">
<div class="col-md-4 drop-zone">
<div class="card mb-3 draggable">
<img src="https://images.unsplash.com/photo-1527219525722-f9767a7f2884?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjl8fHByb2plY3R8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Slack</h5>
<p class="card-text">This project is about integrating a new chat system to slack platform.</p>
<a href="#" class="badge bg-info me-1 my-1">IOS App</a>
<a href="#" class="badge bg-primary me-1 my-1">Desktop App</a>
</div>
<div class="card-footer">
<div class="mb-1 d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file align-middle me-2">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
<polyline points="13 2 13 9 20 9"></polyline>
</svg>
<span>Attach file</span>
</div>
</div>
</div>
</div>
<div class="col-md-8 drop-zone">
<div class="card draggable">
<div class="card-header">
<h5 class="card-title mb-0">Activities</h5>
</div>
<div class="card-body h-100">
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Vanessa Tucker">
<div class="flex-grow-1">
<small class="float-end text-navy">5m ago</small>
<strong>Vanessa Tucker</strong> added 2 new files to <strong>Loopple Update</strong>
<br>
<small class="text-muted">Today 7:51 pm</small>
<br>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
<div class="flex-grow-1">
<small class="float-end text-navy">30m ago</small>
<strong>Charles Hall</strong> added a new comment to <strong>AdminKit</strong>#&39;s v2.9.1 Update <br>
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1"> Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
<a href="#" class="btn btn-sm btn-info mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag align-middle me-2">
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
<line x1="7" y1="7" x2="7.01" y2="7"></line>
</svg> View more </a>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
<div class="flex-grow-1">
<small class="float-end text-navy">1h ago</small>
<strong>Christina Mason</strong> finished tasks <br>
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
<div class="flex-grow-1">
<small class="float-end text-navy">3h ago</small>
<strong>William Harris</strong> posted three updates on <strong>Slack code refactoring</strong>
<br>
<small class="text-muted">Today 5:12 pm</small>
<ul>
<li class="nav-item"> Fix channels new messages loading error </li>
<li class="nav-item"> Added view last 100 messages option </li>
</ul>
<a href="#" class="btn btn-sm btn-info mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag align-middle me-2">
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
<line x1="7" y1="7" x2="7.01" y2="7"></line>
</svg> View more </a>
</div>
</div>
<hr>
<div class="d-grid">
<a href="#" class="btn btn-primary">Load more</a>
</div>
</div>
</div>
</div>
</div>Section Projects Architecture
Component from
Soft UI Dashboard Tailwind
Builder
<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 font-display">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 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" 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 class="font-display">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 class="font-display">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 font-display">New project</h5>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Section Projects Activity
Component from
Chakra UI Dashboard
Builder
<Grid data-type='Grid' templateColumns='repeat(12,1fr)' gap={6}>
<GridItem data-type='GridItem' colSpan={{base:12,lg:4}}>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<Image data-type='Image'
objectFit='cover'
maxW='100%'
src='https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=2000&q=60'
alt='Work'
/>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md'>Slack</Heading>
<Text data-type='Text' py='2'>
This project is about integrating a new chat system to slack platform.
</Text>
<Stack data-type='Stack' direction='row' mt='3'>
<Badge data-type='Badge' colorScheme='green'>IOS App</Badge>
<Badge data-type='Badge' colorScheme='red'>Desktop App</Badge>
</Stack>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' size='sm'>
Attach File
</Button>
</CardFooter>
</Stack>
</Card>
</GridItem>
<GridItem data-type='GridItem' colSpan={{base:12,lg:8}}>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<Stack data-type='Stack'>
<CardBody data-type='CardBody'>
<Heading data-type='Heading' size='md' mb='4'>Activites</Heading>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Vanessa Tucker added 2 new files in Loopple</Text>
<Text data-type='Text' fontSize='xs'>Today 7:51 PM</Text>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Charles Hall pushed 2 commits into Chakra UI Builder</Text>
<Text data-type='Text' fontSize='xs' mb='2'>Today 8:15 PM</Text>
<Box data-type='Box' border='1px' borderColor='gray.200' p='2'>
<Text data-type='Text' fontSize='xs'>Hi guys, I have a problem when I try to push into the main branch. Do you have any time today to take a look?</Text>
</Box>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Marko finished tasks</Text>
<Text data-type='Text' fontSize='xs'>Today 8:54 PM</Text>
</Box>
</Flex>
<Divider data-type='Divider' my='3'></Divider>
<Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'>
<Box data-type='Box'>
<Text data-type='Text' fontSize='md'>Leonard completed the list for today's meeting</Text>
<Text data-type='Text' fontSize='xs' mb='2'>Today 9:14 PM</Text>
<UnorderedList data-type='UnorderedList'>
<ListItem data-type='ListItem'>Add tasks into Jira</ListItem>
<ListItem data-type='ListItem'>Discuss about new content on our blog</ListItem>
</UnorderedList>
</Box>
</Flex>
</CardBody>
<CardFooter data-type='CardFooter'>
<Button data-type='Button' variant='solid' size='sm'>
See more
</Button>
</CardFooter>
</Stack>
</Card>
</GridItem>
</Grid>Section Projects
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-6 drop-zone">
<!-- Members list group card -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Team members</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Alex Smith</a>
</h4>
<span class="text-warning">●</span>
<small>In a meeting</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Samantha Ivy</a>
</h4>
<span class="text-danger">●</span>
<small>Offline</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-6 drop-zone">
<!-- Progress track -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Progress track</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg">
</a>
</div>
<div class="col">
<h5>Argon Design System</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg">
</a>
</div>
<div class="col">
<h5>Angular Now UI Kit PRO</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg">
</a>
</div>
<div class="col">
<h5>Black Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-red" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg">
</a>
</div>
<div class="col">
<h5>React Material Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-teal" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
