General - Aatrox Admin Dashboard

AatroX Admin

By Frontend developer

<div class="card overflow-hidden">
  <img src="assets/images/products/iphone-1.jpg" alt="First slide">
  <div class="card-body justify-between">
  
    <p class="card-title font-semibold mb-2">AatroX Admin </p>
    <p class="text-gray-400 text-sm mb-4">By Frontend developer</p>
    <div class="flex justify-between">
      <button class="btn ripple bg-primary-600 mr-2 text-white" type="button">Primary</button>
      <button class="btn border capitalize text-primary-600 border-primary-600 hover:bg-primary-500 hover:text-white" type="button">Outline</button>
    </div>
  </div>
</div>

AatroX Admin

By Frontend develope

$ 4785.78

Income

4/11/2019

Deadline

<div class="card">
    <div class="card-body justify-between">
        <img class="rounded" src="assets/images/products/headphone-1.jpg" alt="First slide" />
        <p class="card-title font-semibold mt-4">AatroX Admin </p>
        <p class="text-gray-400 text-sm mb-4">By Frontend develope</p>
        <div class="flex justify-between">
            <div>
                <p class="text-xl">$ 4785.78</p>
                <p class="text-gray-400">Income</p>
            </div>
            <div>
                <p class="text-xl">4/11/2019</p>
                <p class="text-gray-400">Deadline</p>
            </div>
        </div>
    </div>
</div>

AatroX Admin

$675

$1k

<div class="card">
    <div class="card-body"><img class="rounded" src="assets/images/products/watch-1.jpg" alt="First slide" />
        <p class="card-title font-semibold mt-4">AatroX Admin </p>
        <div class="my-3">
            <div class="flex flex-wrap justify-between">
                <h6>$675</h6>
                <h6 class="text-gray-400">$1k</h6>
            </div>
            <div class="shadow w-full bg-gray-200 rounded-full mt-3 mb-5">
                <div class="bg-primary-600 rounded-full text-xs leading-none text-center text-white p-1" style="width: 45%"> </div>
            </div>
            <div class="flex justify-between">
              <button class="btn ripple bg-primary-600 mr-2 text-white" type="button">Primary</button>
              <button class="btn border capitalize text-primary-600 border-primary-600 hover:bg-primary-500 hover:text-white" type="button">Outline</button>
            </div>
        </div>
    </div>
</div>

New Leads

205

<div class="card">
    <div class="card-body">
        <div class="flex align-center">
            <i class="i-Add-User text-6xl text-primary-200"></i>
            <div class="m-auto">
                <p class="text-gray-400">New Leads</p>
                <p class="text-xl text-primary-600">205</p>
            </div>
        </div>
    </div>
</div>

Sales

$4021

<div class="card">
    <div class="card-body">
        <div class="flex align-center">
            <i class="i-Financial text-6xl text-primary-200"></i>
            <div class="m-auto">
                <p class="text-gray-400">Sales</p>
                <p class="text-xl text-primary-600">$4021</p>
            </div>
        </div>
    </div>
</div>

Orders

<div class="card">
    <div class="card-body">
        <div class="flex align-center">
            <i class="i-Checkout-Basket text-6xl text-primary-200"></i>
            <div class="m-auto">
                <p class="text-gray-400">Orders</p>
                <p class="text-xl text-primary-600">80</p>
            </div>
        </div>
    </div>
</div>

Expense

$1200

<div class="card">
    <div class="card-body">
        <div class="flex align-center">
            <i class="i-Money-2 text-6xl text-primary-200"></i>
            <div class="m-auto">
                <p class="text-gray-400">Expense</p>
                <p class="text-xl text-primary-600">$1200</p>
            </div>
        </div>
    </div>
</div>

Today's Upload

<div class="card">
    <div class="card-body text-center">
      <i class="i-Data-Upload text-5xl text-primary-600"></i>
      <p class="text-gray-700 my-2">Today Upload</p>
      <p class="text-2xl text-primary-600">21</p>
    </div>
</div>

4021

<div class="card">
    <div class="card-body text-center">
        <i class="i-Money-2 text-5xl text-primary-600 mb-3"></i>
        <p class="text-2xl text-primary-600">4021</p>
    </div>
</div>

4021

<div class="card">
    <div class="card-body text-center">
        <i class="i-Bell text-5xl text-primary-600 mb-3"></i>
        <p class="text-2xl text-primary-600">4021</p>
    </div>
</div>

Network Stats

Lorem ipsum dolor sit amet consectetur.

Backups

Total: 32

Databases

Total: 32

Space used

Total: 160GB

Downloaded

Total: 30GB

<div class="card">
    <div class="card-body">
        <div class="mb-5">
            <div class="card-title">Network Stats</div>
            <p class="text-xs text-gray-400">Lorem ipsum dolor sit amet consectetur.</p>
        </div>
        <div class="grid grid-cols-12 gap-4">
            <div class="card col-span-12 lg:col-span-6">
                <div class="flex items-center bg-primary-600 text-white py-4 px-4 rounded-md"><i class="i-Data-Backup mr-3 text-4xl"></i>
                    <div>
                        <h4 class="text-white mb-0 text-lg font-semibold">Backups</h4><span>Total: 32</span></div>
                </div>
            </div>
            <div class="card col-span-12 lg:col-span-6">
                <div class="flex items-center bg-primary-600 text-white py-4 px-4 rounded-md"><i class="i-Big-Data mr-3 text-4xl"></i>
                    <div>
                        <h4 class="text-white mb-0 text-lg font-semibold">Databases</h4><span>Total: 32</span></div>
                </div>
            </div>
            <div class="card col-span-12 lg:col-span-6">
                <div class="flex items-center border border-gray-500 text-white py-4 px-4 rounded-md"><i class="i-Data-Cloud mr-3 text-4xl text-gray-500"></i>
                    <div>
                        <h4 class="text-gray-500 mb-0 text-lg font-semibold">Space used</h4><span class="text-gray-500">Total: 160GB</span></div>
                </div>
            </div>
            <div class="card col-span-12 lg:col-span-6">
                <div class="flex items-center border border-gray-500 py-4 px-4 rounded-md"><i class="i-Data-Download mr-3 text-4xl text-gray-500"></i>
                    <div>
                        <h4 class="mb-0 text-lg font-semibold text-gray-500">Downloaded</h4><span class="text-gray-500">Total: 30GB</span></div>
                </div>
            </div>
        </div>
    </div>
</div>

Jassica Hike

UI/UX Designer

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae cumque.

<div class="card">
    <div class="card-body text-center">
        <img class="m-auto shadow-lg avatar-md rounded-full" src="./assets/images/faces/16.jpg" alt="" />
        <p class="text-base mt-4">Jassica Hike</p>
        <p class="text-base text-gray-400">UI/UX Designer</p>
        <p class="my-2 text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae cumque.</p>
        <button class="btn mr-2 mt-4 btn-pill border capitalize btn-primary px-3 py-1 text-white text-sm" type="button">Contact</button>
        <div class="mt-4">
          <a class="hover:text-primary-600 mr-2" href="">
            <i class="i-Linkedin-2"></i>
          </a>
          <a class="hover:text-primary-600 mr-2" href="">
            <i class="i-Facebook-2"></i>
          </a>
          <a class="hover:text-primary-600" href="">
            <i class="i-Twitter"></i>
          </a>
        </div>
    </div>
</div>

James Hike

VR Developer

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae cumque.

<div class="card">
    <div class="card-body text-center">
        <img class="m-auto shadow-lg avatar-md rounded-full" src="./assets/images/faces/2.jpg" alt="" />
        <p class="text-base mt-4">James Hike</p>
        <p class="text-base text-gray-400">VR Developer</p>
        <p class="my-2 text-sm text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae cumque.</p>
        <button class="btn mr-2 mt-4 btn-pill border capitalize btn-primary px-3 py-1 text-white text-sm" type="button">Contact</button>
        <div class="mt-4">
          <a class="hover:text-primary-600 mr-2" href="">
            <i class="i-Linkedin-2"></i>
          </a>
          <a class="hover:text-primary-600 mr-2" href="">
            <i class="i-Facebook-2"></i>
          </a>
          <a class="hover:text-primary-600" href="">
            <i class="i-Twitter"></i>
          </a>
        </div>
    </div>
</div>

Product featured

By ABC Cafe

$40 ~~$55~~

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt placeat esse tempore debitis.

<div class="card overflow-hidden">
    <div class="flex flex-col lg:flex-row">
      <div>
        <img class="h-52 object-cover w-full lg:w-auto" src="./assets/images/photo-wide-1.jpg" alt="" />
      </div>
      <div class="flex-grow-1 p-4">
          <h5 class="m-0 text-lg">Product featured</h5>
          <p class="m-0 text-sm text-gray-500">By ABC Cafe</p>
          <p class="m-0 text-xs text-gray-500">$40 <del>$55</del></p>
          <p class="text-gray-500 text-sm mt-3 mb-3">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt placeat esse tempore debitis.</p>
          <button class="btn-icon border border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white">
            <i class="i-Add-Cart p-1"></i>
          </button>
      </div>
    </div>
</div>

Product featured

By ABC Cafe

$40 ~~$55~~

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt placeat esse tempore debitis.

<div class="card overflow-hidden">
    <div class="flex flex-col lg:flex-row">
      <div>
        <img class="h-52 object-cover w-full lg:w-auto" src="./assets/images/photo-wide-2.jpg" alt="" />
      </div>
      <div class="flex-grow-1 p-4">
          <h5 class="m-0 text-lg">Product featured</h5>
          <p class="m-0 text-sm text-gray-500">By ABC Cafe</p>
          <p class="m-0 text-xs text-gray-500">$40 <del>$55</del></p>
          <p class="text-gray-500 text-sm mt-3 mb-3">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt placeat esse tempore debitis.</p>
          <button class="btn-icon border border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white">
            <i class="i-Add-Cart p-1"></i>
          </button>
      </div>
    </div>
</div>

Card title

Last updated 3 mins ago

1203.12.2018

<div class="card overflow-hidden relative">
    <img class="w-full" src="./assets/images/photo-long-1.jpg" alt="" />
    <div class="card-img-overlay">
        <div class="text-center pt-4">
            <h5 class="mb-2 relative z-10 text-white">Card title</h5>
            <div class="separator relative z-10 mb-2"></div>
            <p class="text-sm italic relative z-10 text-white">Last updated 3 mins ago</p>
        </div>
        <div class="p-1 text-left border-none absolute bottom-5 card-footer flex">
          <span class="mr-3 flex items-center relative z-10 text-white">
          <i class="i-Speach-Bubble-6 mr-1 text-white"></i> 12</span>
          <span class="d-flex align-items-center relative z-10 text-white">
            <i class="i-Calendar-4 mr-2 text-white"></i>03.12.2018
          </span>
        </div>
    </div>
</div>

Card title

Last updated 3 mins ago

1203.12.2018

<div class="card overflow-hidden relative">
    <img class="w-full" src="./assets/images/photo-long-2.jpg" alt="" />
    <div class="card-img-overlay">
        <div class="text-center pt-4">
            <h5 class="mb-2 relative z-10 text-white">Card title</h5>
            <div class="separator relative z-10 mb-2"></div>
            <p class="text-sm italic relative z-10 text-white">Last updated 3 mins ago</p>
        </div>
        <div class="p-1 text-left border-none absolute bottom-5 card-footer flex">
          <span class="mr-3 flex items-center relative z-10 text-white">
          <i class="i-Speach-Bubble-6 mr-1 text-white"></i> 12</span>
          <span class="d-flex align-items-center relative z-10 text-white">
            <i class="i-Calendar-4 mr-2 text-white"></i>03.12.2018
          </span>
        </div>
    </div>
</div>

Top Authors

David Hopkins

Lorem ipsum dolor sit amet consectetur.

James Mitchell

Lorem ipsum dolor sit amet consectetur.

James Mitchell

Lorem ipsum dolor sit amet consectetur.

<div class="card">
    <div class="card-body">
        <div class="card-title mb-4">Top Authors</div>
        <div class="flex flex-col text-center items-center mb-10 md:flex-row md:text-left">
            <div class="flex items-center flex-grow flex-col md:flex-row"><img class="avatar-md rounded-lg mr-3 mb-2 md:mb-0" src="./assets/images/faces/2.jpg" />
                <div>
                    <p class="text-base">David Hopkins</p>
                    <p class="text-sm text-gray-400 my-2 md:my-0">Lorem ipsum dolor sit amet consectetur.</p>
                </div>
            </div>
            <div><button class="mr-2 btn btn-primary-outline rounded-full" type="button">Follow</button></div>
        </div>
        <div class="flex flex-col text-center items-center mb-10 md:flex-row md:text-left">
            <div class="flex items-center flex-grow flex-col md:flex-row"><img class="avatar-md rounded-lg mr-3 mb-2 md:mb-0" src="./assets/images/faces/3.jpg" />
                <div>
                    <p class="text-base">James Mitchell</p>
                    <p class="text-sm text-gray-400 my-2 md:my-0">Lorem ipsum dolor sit amet consectetur.</p>
                </div>
            </div>
            <div><button class="mr-2 btn btn-primary-outline rounded-full" type="button">Follow</button></div>
        </div>
        <div class="flex flex-col text-center items-center mb-10 md:flex-row md:text-left">
            <div class="flex items-center flex-grow flex-col md:flex-row"><img class="avatar-md rounded-lg mr-3 mb-2 md:mb-0" src="./assets/images/faces/5.jpg" />
                <div>
                    <p class="text-base">James Mitchell</p>
                    <p class="text-sm text-gray-400 my-2 md:my-0">Lorem ipsum dolor sit amet consectetur.</p>
                </div>
            </div>
            <div><button class="mr-2 btn btn-primary-outline rounded-full" type="button">Follow</button></div>
        </div>
    </div>
</div>

Travel Different Countries

From UK

75%

From U.S.A

33%

From Canada

50%

From France

13%

From Japan

25%

<div class="card">
    <div class="card-body">
        <div class="card-title mb-4">Travel Different Countries</div>
        <div class="mb-5">
            <div class="flex items-center justify-between">
                <p class="text-xs text-gray-500">From UK</p>
                <div><span class="text-xs text-gray-500 mr-1">75%</span><span></span><i class="i-Turn-Up-2 text-primary-500 font-semibold"></i></div>
            </div>
            <div class="shadow w-full bg-gray-200 mb-2 rounded-full">
                <div class="bg-primary-500 text-xs pt-1 text-center text-white rounded-full" style="width: 75%"></div>
            </div>
        </div>
        <div class="mb-5">
            <div class="flex items-center justify-between">
                <p class="text-xs text-gray-500">From U.S.A</p>
                <div><span class="text-xs text-gray-500 mr-1">33%</span><span></span><i class="i-Turn-Down-2 text-danger-500 font-semibold"></i></div>
            </div>
            <div class="shadow w-full bg-gray-200 mb-2 rounded-full">
                <div class="bg-primary-500 text-xs pt-1 text-center text-white rounded-full" style="width: 33%"></div>
            </div>
        </div>
        <div class="mb-5">
            <div class="flex items-center justify-between">
                <p class="text-xs text-gray-500">From Canada</p>
                <div><span class="text-xs text-gray-500 mr-1">50%</span><span></span><i class="i-Turn-Up-2 text-primary-500 font-semibold"></i></div>
            </div>
            <div class="shadow w-full bg-gray-200 mb-2 rounded-full">
                <div class="bg-info-500 text-xs pt-1 text-center text-white rounded-full" style="width: 50%"></div>
            </div>
        </div>
        <div class="mb-5">
            <div class="flex items-center justify-between">
                <p class="text-xs text-gray-500">From France</p>
                <div><span class="text-xs text-gray-500 mr-1">13%</span><span></span><i class="i-Turn-Down-2 text-danger-500 font-semibold"></i></div>
            </div>
            <div class="shadow w-full bg-gray-200 mb-2 rounded-full">
                <div class="bg-danger-500 text-xs pt-1 text-center text-white rounded-full" style="width: 13%"></div>
            </div>
        </div>
        <div class="mb-5">
            <div class="flex items-center justify-between">
                <p class="text-xs text-gray-500">From Japan</p>
                <div><span class="text-xs text-gray-500 mr-1">25%</span><span></span><i class="i-Turn-Down-2 text-danger-500 font-semibold"></i></div>
            </div>
            <div class="shadow w-full bg-gray-200 mb-2 rounded-full">
                <div class="bg-warning-500 text-xs pt-1 text-center text-white rounded-full" style="width: 25%"></div>
            </div>
        </div>
    </div>
</div>

Notification

Tasks

in a sec

Traffic

4hr ago

Order

yesterday

User

2 April

<div class="card">
    <div class="card-body">
        <div class="card-title mb-4">Notification</div>
        <div class="flex justify-between items-center mb-5">
            <div class="flex mr-2 items-center">
                <div class="badge-circle bg-info-100 text-info-600 font-bold h-10 w-10 mr-2">A</div>
                <p class="text-sm font-semibold text-gray-600">Tasks</p>
            </div>
            <p class="text-sm text-gray-400">in a sec</p>
        </div>
        <div class="flex justify-between items-center mb-5">
            <div class="flex mr-2 items-center">
                <div class="badge-circle bg-warning-100 text-warning-600 font-bold h-10 w-10 mr-2">B</div>
                <p class="text-sm font-semibold text-gray-600">Traffic</p>
            </div>
            <p class="text-sm text-gray-400">4hr ago</p>
        </div>
        <div class="flex justify-between items-center mb-5">
            <div class="flex mr-2 items-center">
                <div class="badge-circle bg-danger-100 text-danger-600 font-bold h-10 w-10 mr-2">O</div>
                <p class="text-sm font-semibold text-gray-600">Order</p>
            </div>
            <p class="text-sm text-gray-400">yesterday</p>
        </div>
        <div class="flex justify-between items-center mb-5">
            <div class="flex mr-2 items-center">
                <div class="badge-circle bg-primary-100 text-primary-600 font-bold h-10 w-10 mr-2">U</div>
                <p class="text-sm font-semibold text-gray-600">User</p>
            </div>
            <p class="text-sm text-gray-400">2 April</p>
        </div>
    </div>
</div>

Browser Status

Google Chrome

98%

Firefox

88%

Internet Explorer

89%

Android

1009%

<div class="card">
    <div class="card-body">
        <div class="card-title mb-4">Browser Status</div>
        <div class="flex items-center justify-between mb-5">
            <div class="flex items-center"><i class="i-Chrome text-danger-500 mr-2"></i>
                <p>Google Chrome</p>
            </div><span class="badge rounded-full sm text-white bg-primary-500 mr-3">98%</span></div>
        <div class="flex items-center justify-between mb-5">
            <div class="flex items-center"><i class="i-Firefox text-warning-500 mr-2"></i>
                <p>Firefox</p>
            </div><span class="badge rounded-full sm text-white bg-warning-500 mr-3">88%</span></div>
        <div class="flex items-center justify-between mb-5">
            <div class="flex items-center"><i class="i-Internet-Explorer text-info-500 mr-2"></i>
                <p>Internet Explorer</p>
            </div><span class="badge rounded-full sm text-white bg-info-500 mr-3">89%</span></div>
        <div class="flex items-center justify-between mb-5">
            <div class="flex items-center"><i class="i-Android text-primary-500 mr-2"></i>
                <p>Android</p>
            </div><span class="badge rounded-full sm text-white bg-danger-500 mr-3">1009%</span></div>
    </div>
</div>

Poll

Your mobile app daily usage

Trello20 Minutes

33%

Slack20 Minutes

63%

Skype2 Hour

33%

Twitter2 Hour

03%

<div class="card">
    <div class="card-body">
        <div class="card-title">Poll</div>
        <p class="text-xs text-gray-400 mb-5">Your mobile app daily usage </p>
        <div class="mb-5">
            <div class="flex items-center justify-between">
                <div><span class="mr-2">Trello</span><span class="text-xs text-gray-500">20 Minutes</span></div>
                <div><span class="text-xs text-gray-500 mr-1">33%</span></div>
            </div>
            <div class="shadow w-full bg-gray-200 mb-2 rounded-full">
                <div class="bg-danger-500 text-xs pt-1 text-center text-white rounded-full" style="width: 33%"></div>
            </div>
        </div>
        <div class="mb-5">
            <div class="flex items-center justify-between">
                <div><span class="mr-2">Slack</span><span class="text-xs text-gray-500">20 Minutes</span></div>
                <div><span class="text-xs text-gray-500 mr-1">63%</span></div>
            </div>
            <div class="shadow w-full bg-gray-200 mb-2 rounded-full">
                <div class="bg-primary-500 text-xs pt-1 text-center text-white rounded-full" style="width: 63%"></div>
            </div>
        </div>
        <div class="mb-5">
            <div class="flex items-center justify-between">
                <div><span class="mr-2">Skype</span><span class="text-xs text-gray-500">2 Hour</span></div>
                <div><span class="text-xs text-gray-500 mr-1">33%</span></div>
            </div>
            <div class="shadow w-full bg-gray-200 mb-2 rounded-full">
                <div class="bg-warning-500 text-xs pt-1 text-center text-white rounded-full" style="width: 33%"></div>
            </div>
        </div>
        <div class="mb-5">
            <div class="flex items-center justify-between">
                <div><span class="mr-2">Twitter</span><span class="text-xs text-gray-500">2 Hour</span></div>
                <div><span class="text-xs text-gray-500 mr-1">03%</span></div>
            </div>
            <div class="shadow w-full bg-gray-200 mb-2 rounded-full">
                <div class="bg-info-500 text-xs pt-1 text-center text-white rounded-full" style="width: 03%"></div>
            </div><span class="badge rounded-full sm text-white bg-danger-500 mr-3">1009%</span></div>
    </div>
</div>

Latest Log

12 new users registered

Just Now
System Shutdown

2hr ago
System Error

recently
12 new user registered

Just Now
12 new user registered

4yr ago

<div class="card">
    <div class="card-body">
        <div class="card-title mb-4">Latest Log</div>
        <div class="relative">
            <div class="border-r-2 border-gray-200 absolute h-full top-0" style="left: 3px; top: 8px;"></div>
            <ul class="list-none m-0 p-0">
                <li class="mb-5">
                    <div class="flex items-center mb-1 justify-between">
                        <div class="bg-primary-500 rounded-full h-2 w-2 relative z-10 mr-2"></div>
                        <div class="flex-grow">
                            <p class="text-sm">12 new users registered </p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-400">Just Now</p>
                        </div>
                    </div>
                </li>
                <li class="mb-5">
                    <div class="flex items-center mb-1 justify-between">
                        <div class="bg-primary-500 rounded-full h-2 w-2 relative z-10 mr-2"></div>
                        <div class="flex-grow">
                            <p class="text-sm">System Shutdown</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-400">2hr ago</p>
                        </div>
                    </div>
                </li>
                <li class="mb-5">
                    <div class="flex items-center mb-1 justify-between">
                        <div class="bg-danger-500 rounded-full h-2 w-2 relative z-10 mr-2"></div>
                        <div class="flex-grow">
                            <p class="text-sm">System Error</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-400">recently</p>
                        </div>
                    </div>
                </li>
                <li class="mb-5">
                    <div class="flex items-center mb-1 justify-between">
                        <div class="bg-warning-500 rounded-full h-2 w-2 relative z-10 mr-2"></div>
                        <div class="flex-grow">
                            <p class="text-sm">12 new user registered</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-400">Just Now</p>
                        </div>
                    </div>
                </li>
                <li class="mb-5">
                    <div class="flex items-center mb-1 justify-between">
                        <div class="bg-info-500 rounded-full h-2 w-2 relative z-10 mr-2"></div>
                        <div class="flex-grow">
                            <p class="text-sm">12 new user registered</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-400">4yr ago</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Timothy Clarkson

Digital Marketer

5.078 Projects

<div class="card mb-2 overflow-hidden">
    <div class="card-body text-center"><img class="avatar-lg rounded-full mx-auto my-4" src="./assets/images/faces/1.jpg" />
        <p class="text-2xl">Timothy Clarkson</p>
        <p class="text-sm text-gray-400">Digital Marketer</p>
        <div class="flex justify-between py-4 border-b border-gray-200"><button class="btn ripple btn-primary" type="button">Download</button><button class="btn ripple btn-primary-outline" type="button">Preview</button></div>
        <div class="flex justify-between py-4"><span><i class="i-Add-UserStar text-warning-500 mr-2 font-semibold"></i>5.0</span><span><i class="i-Bag text-primary-500 mr-2 font-semibold"></i>78 Projects</span></div>
    </div>
</div>

1.2K

Connect

<div class="card text-center relative"><button class="btn-icon absolute -right-6 -top-6"><img class="avatar rounded-full" src="assets/images/faces/2.jpg"/></button>
    <div class="card-body">
        <div class="badge-circle bg-danger-100 text-danger-500 font-bold h-10 w-10 mb-4 mx-auto"><i class="i-Cursor-Click-2"></i></div>
        <p class="text-2xl font-black">1.2K</p>
        <p class="mb-5 text-gray-500 text-xs">Connect</p><button class="btn text-danger-500 rounded-full bg-danger-100 hover:bg-danger-500 hover:text-white hover:shadow-lg" type="button"> <i class="i-Arrow-Down font-bold mr-2"></i><span class="font-bold">05.6%</span></button></div>
</div>

2.3k900

23 days ago

<div class="card overflow-hidden">
    <img src="assets/images/gallery/sq-8.jpg" />
    <div class="card-body">
        <div class="flex justify-between">
            <div class="flex items-center">
              <i class="i-Heart1 text-gray-500 font-semibold mr-2"></i>
              <span class="text-gray-500 font-semibold mr-4">2.3k</span>
              <i class="i-Speach-Bubble-3 text-gray-500 font-semibold mr-2"></i>
              <span class="text-gray-500 font-semibold">900</span>
            </div>
            <p class="text-gray-400 font-semibold">23 days ago</p>
        </div>
    </div>
</div>

9.2K

Engagement

<div class="card text-center">
    <div class="card-body">
        <div class="flex justify-center items-center rounded badge-circle bg-primary-100 text-primary-500 font-bold h-10 w-14 mb-4 mx-auto">
          <i class="i-Cursor-Click-2"></i>
        </div>
        <p class="text-2xl font-black">9.2K</p>
        <p class="mb-5 text-gray-500 text-xs">Engagement</p>
        <button class="btn text-primary-500 bg-primary-100 hover:bg-primary-500 hover:text-white hover:shadow-lg" type="button">
         <i class="i-Arrow-Down font-bold mr-2"></i>
         <span class="font-bold">58.6%</span>
        </button>
    </div>
</div>

Feedback

1.2K

<div class="card text-center relative">
        <button class="btn-icon absolute -right-4 -top-4">
          <img class="avatar-sm rounded-full" src="assets/images/faces/2.jpg"/>
        </button>
    <div class="card-body">
        <p class="text-xs text-gray-500">Feedback</p>
        <p class="text-2xl font-bold mb-4">1.2K</p>
        <button class="btn text-info-500 bg-info-100 hover:bg-info-500 hover:text-white hover:shadow-lg" type="button"> 
          <i class="i-Arrow-Down font-bold mr-2"></i>
          <span class="font-bold">05.6%   </span>
        </button>
    </div>
</div>

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio

Dapibus ac facilisis in

Vestibulum at eros

<div class="card overflow-hidden">
    <img src="./assets/images/photo-wide-3.jpg" />
    <div class="p-5">
        <div class="card-title mb-3">Card Title</div>
        <p class="text-xs text-gray-700"> Some quick example text to build on the card title and make up the bulk of the card content. </p>
        <div class="divide-y divide-gray-200">
            <div class="py-3">
                <p class="text-xs text-gray-700">Cras justo odio </p>
            </div>
            <div class="py-3">
                <p class="text-xs text-gray-700"> Dapibus ac facilisis in </p>
            </div>
            <div class="py-3">
                <p class="text-xs text-gray-700"> Vestibulum at eros</p>
            </div>
        </div>
    </div>
</div>

Search Result

$675

$1k

Backups

Databases

Space used

Downloaded

Product featured

Product featured

Card title

Card title