Home
Framework
Theme
All
561
Forms
12
Charts
21
Navbars
38
Sidebars
26
Typography
41
Components
51
Tables
34
Cards
63
Cards Section
37
Testimonials
13
Teams Section
11
Faq
4
Headers
36
Blogs
11
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
13
Projects Section
14
Stats
7
Logo Areas
6
Authentication
10
Contact Us
5
Features
19
Pricing
7
Teams
9
Call To Actions
13
Http Codes
2
Projects Section - All Examples
Discover 14 Projects Section examples available in Loopple
Section Projects Cards
<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><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 Background Image
Section Projects With Bottom Title
Section Projects
<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><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 Projects Title Inline
Section Project
<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><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 Cards
Section Projects Teams
Section Project Analytics
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>