Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-10 07:25:34 +00:00
Code Issues Projects Releases Wiki Activity

Update components (#78)

Browse Source 
* WIP

* wrapped components with <html>

* Update

Co-authored-by: DevDhaif <devdhaif@gmail.com>
This commit is contained in:
khatab Wedaa
2022-08-27 14:35:43 +02:00
committed by GitHub
parent c14f479a71
commit 2883777ff3
274 changed files with 10721 additions and 24059 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
components/testimonials/Card.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<section class="bg-white dark:bg-gray-900">
<div class="container px-6 py-10 mx-auto">
<div class="mt-6 md:flex md:items-center md:justify-between">
<div>
<h1 class="text-3xl font-semibold text-gray-800 capitalize xl:text-5xl lg:text-4xl dark:text-white">
What our clients are saying
</h1>
<div class="flex mx-auto mt-6">
<span class="inline-block w-40 h-1 bg-blue-500 rounded-full"></span>
<span class="inline-block w-3 h-1 mx-1 bg-blue-500 rounded-full"></span>
<span class="inline-block w-1 h-1 bg-blue-500 rounded-full"></span>
</div>
</div>
<div class="flex justify-between mt-8 md:mt-0">
<button class="p-2 mx-3 text-gray-800 transition-colors duration-300 border rounded-full dark:text-gray-200 dark:hover:bg-gray-800 dark:border-gray-700 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="p-2 text-gray-800 transition-colors duration-300 border rounded-full dark:text-gray-200 dark:hover:bg-gray-800 dark:border-gray-700 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
<section class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 lg:grid-cols-2 xl:grid-cols-3">
<div class="p-8 border rounded-lg dark:border-gray-700">
<p class="leading-loose text-gray-500 dark:text-gray-400">
“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad
tempora doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa
aperiam dolorum, obcaecati corrupti aspernatur a.”.
</p>
<div class="flex items-center mt-8 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 shrink-0 h-14 ring-4 ring-gray-300 dark:ring-gray-700" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-gray-800 dark:text-white">Robert</h1>
<span class="text-sm text-gray-500 dark:text-gray-400">CTO, Robert Consultency</span>
</div>
</div>
</div>
<div class="p-8 bg-blue-500 border border-transparent rounded-lg dark:bg-blue-600">
<p class="leading-loose text-white">
“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad
tempora doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa
aperiam dolorum, obcaecati corrupti aspernatur a.”.
</p>
<div class="flex items-center mt-8 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 shrink-0 h-14 ring-4 ring-blue-200" src="https://images.unsplash.com/photo-1531590878845-12627191e687?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-white">Jeny Doe</h1>
<span class="text-sm text-blue-200">CEO, Jeny Consultency</span>
</div>
</div>
</div>
<div class="p-8 border rounded-lg dark:border-gray-700">
<p class="leading-loose text-gray-500 dark:text-gray-400">
“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad
tempora doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa
aperiam dolorum, obcaecati corrupti aspernatur a.”.
</p>
<div class="flex items-center mt-8 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 shrink-0 h-14 ring-4 ring-gray-300 dark:ring-gray-700" src="https://images.unsplash.com/photo-1488508872907-592763824245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-gray-800 dark:text-white">Ema Watson </h1>
<span class="text-sm text-gray-500 dark:text-gray-400">Marketing Manager at Stech</span>
</div>
</div>
</div>
</section>
</div>
</section>
</body>
</html>

84
components/testimonials/Centered.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<section class="bg-white dark:bg-gray-900">
<div class="container px-6 py-10 mx-auto">
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize xl:text-5xl lg:text-4xl dark:text-white">
What our <span class="text-blue-500 ">clients</span> say
</h1>
<p class="max-w-2xl mx-auto mt-6 text-center text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo incidunt ex placeat modi magni quia error
alias, adipisci rem similique, at omnis eligendi optio eos harum.
</p>
<section class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 lg:grid-cols-2 xl:grid-cols-3">
<div class="p-8 border rounded-lg dark:border-gray-700">
<p class="leading-loose text-gray-500 dark:text-gray-400">
“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad
tempora doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa
aperiam dolorum, obcaecati corrupti aspernatur a.”.
</p>
<div class="flex items-center mt-8 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 shrink-0 h-14 ring-4 ring-gray-300 dark:ring-gray-700" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-gray-800 dark:text-white">Robert</h1>
<span class="text-sm text-gray-500">CTO, Robert Consultency</span>
</div>
</div>
</div>
<div class="p-8 border rounded-lg dark:border-gray-700">
<p class="leading-loose text-gray-500 dark:text-gray-400">
“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad
tempora doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa
aperiam dolorum, obcaecati corrupti aspernatur a.”.
</p>
<div class="flex items-center mt-8 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 shrink-0 h-14 ring-4 ring-gray-300 dark:ring-gray-700" src="https://images.unsplash.com/photo-1531590878845-12627191e687?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-gray-800 dark:text-white">Jeny Doe</h1>
<span class="text-sm text-gray-500">CEO, Jeny Consultency</span>
</div>
</div>
</div>
<div class="p-8 border rounded-lg dark:border-gray-700">
<p class="leading-loose text-gray-500 dark:text-gray-400">
“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad
tempora doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa
aperiam dolorum, obcaecati corrupti aspernatur a.”.
</p>
<div class="flex items-center mt-8 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 shrink-0 h-14 ring-4 ring-gray-300 dark:ring-gray-700" src="https://images.unsplash.com/photo-1488508872907-592763824245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-gray-800 dark:text-white">Ema Watson </h1>
<span class="text-sm text-gray-500">Marketing Manager at Stech</span>
</div>
</div>
</div>
</section>
</div>
</section>
</body>
</html>

64
components/testimonials/FullPage.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<section class="bg-white dark:bg-gray-900">
<div class="relative flex">
<div class="min-h-screen lg:w-1/3"></div>
<div class="hidden w-3/4 min-h-screen bg-gray-100 dark:bg-gray-800 lg:block"></div>
<div class="container flex flex-col justify-center w-full min-h-screen px-6 py-10 mx-auto lg:absolute lg:inset-x-0">
<h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl xl:text-5xl dark:text-white">
What our <span class="text-blue-500">customers</span> <br> are saying
</h1>
<div class="mt-10 lg:mt-20 lg:flex lg:items-center">
<img class="object-cover object-center w-full lg:w-[32rem] rounded-lg h-96" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
<div class="mt-8 lg:px-10 lg:mt-0">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white lg:w-72">
Help us improve our productivity
</h1>
<p class="max-w-lg mt-6 text-gray-500 dark:text-gray-400">
“ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad
tempora doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa
aperiam dolorum, obcaecati corrupti aspernatur a. ”
</p>
<h3 class="mt-6 text-lg font-medium text-blue-500">Ronik Ederson</h3>
<p class="text-gray-600 dark:text-gray-300">Marketing Manager at Stech</p>
</div>
</div>
<div class="flex items-center justify-between mt-12 lg:justify-start">
<button class="p-2 text-gray-800 transition-colors duration-300 border rounded-full dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="p-2 text-gray-800 transition-colors duration-300 border rounded-full dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 lg:mx-6 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
</section>
</body>
</html>

109
components/testimonials/FullPageWithSlider.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<section class="relative flex">
<div class="min-h-screen bg-white dark:bg-gray-900 md:w-3/4"></div>
<div class="min-h-screen bg-blue-500 md:w-2/5"></div>
<div class="flex flex-col justify-center w-full min-h-screen px-4 py-10 md:fixed md:mx-24">
<h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl xl:text-5xl dark:text-white">
What our <span class="text-blue-500">customers</span> <br> are saying
</h1>
<div class="grid w-full grid-cols-1 gap-8 mt-8 2xl:grid-cols-4 lg:mt-16 md:grid-cols-2 lg:grid-cols-3">
<div class="w-full p-8 bg-white rounded-md shadow-lg dark:bg-gray-800">
<p class="leading-loose text-gray-500 dark:text-gray-400">
“ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ea tempora dolores qui eius pariatur
odit ad voluptas iste, cum accusantium beatae tempore quasi nesciunt distinctio. ”
</p>
<div class="flex items-center mt-6 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 h-14" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-gray-800 dark:text-white">Robbert</h1>
<span class="text-sm text-gray-500 dark:text-gray-400">CTO, Robert Consultency</span>
</div>
</div>
</div>
<div class="w-full p-8 bg-white rounded-md shadow-lg dark:bg-gray-800">
<p class="leading-loose text-gray-500 dark:text-gray-400">
“ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ea tempora dolores qui eius pariatur
odit ad voluptas iste, cum accusantium beatae tempore quasi nesciunt distinctio. ”
</p>
<div class="flex items-center mt-6 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 h-14" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=761&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-gray-800 dark:text-white">Jeny Doe</h1>
<span class="text-sm text-gray-500 dark:text-gray-400">CEO, Jeny Consultency</span>
</div>
</div>
</div>
<div class="w-full p-8 bg-white rounded-md shadow-lg dark:bg-gray-800 md:hidden lg:block">
<p class="leading-loose text-gray-500 dark:text-gray-400">
“ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ea tempora dolores qui eius pariatur
odit ad voluptas iste, cum accusantium beatae tempore quasi nesciunt distinctio. ”
</p>
<div class="flex items-center mt-6 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 h-14" src="https://images.unsplash.com/photo-1499470932971-a90681ce8530?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-gray-800 dark:text-white">Mia Brown</h1>
<span class="text-sm text-gray-500 dark:text-gray-400">Marketing Manager at Stech</span>
</div>
</div>
</div>
<div class="w-full p-8 bg-white rounded-md shadow-lg dark:bg-gray-800 md:hidden 2xl:block">
<p class="leading-loose text-gray-500 dark:text-gray-400">
“ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ea tempora dolores qui eius pariatur
odit ad voluptas iste, cum accusantium beatae tempore quasi nesciunt distinctio. ”
</p>
<div class="flex items-center mt-6 -mx-2">
<img class="object-cover mx-2 rounded-full w-14 h-14" src="https://images.unsplash.com/photo-1488508872907-592763824245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
<div class="mx-2">
<h1 class="font-semibold text-gray-800 dark:text-white">Lead Designer</h1>
<span class="text-sm text-gray-500 dark:text-gray-400">Developer at Stech</span>
</div>
</div>
</div>
</div>
<div class="items-center hidden mt-12 md:flex">
<button class="p-2 text-gray-800 transition-colors duration-300 border rounded-full dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="p-2 text-gray-800 transition-colors duration-300 border rounded-full dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 lg:mx-6 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</section>
</body>
</html>

57
components/testimonials/Single.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<section class="bg-white dark:bg-gray-900">
<div class="container px-6 py-10 mx-auto">
<div class="lg:-mx-6 lg:flex lg:items-center">
<img class="object-cover object-center lg:w-1/2 lg:mx-6 w-full h-96 rounded-lg lg:h-[36rem]" src="https://images.unsplash.com/photo-1499470932971-a90681ce8530?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
<div class="mt-8 lg:w-1/2 lg:px-6 lg:mt-0">
<p class="text-5xl font-semibold text-blue-500 ">“</p>
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white xl:text-4xl lg:w-96">
Help us improve our productivity
</h1>
<p class="max-w-lg mt-6 text-gray-500 dark:text-gray-400 ">
“ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad
tempora doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa
aperiam dolorum, obcaecati corrupti aspernatur a. ”
</p>
<h3 class="mt-6 text-lg font-medium text-blue-500">Mia Brown</h3>
<p class="text-gray-600 dark:text-gray-300">Marketing Manager at Stech</p>
<div class="flex items-center justify-between mt-12 lg:justify-start">
<button class="p-2 text-gray-800 transition-colors duration-300 border rounded-full dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="p-2 text-gray-800 transition-colors duration-300 border rounded-full dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 lg:mx-6 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

65
components/testimonials/Slider.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<section class="bg-white dark:bg-gray-900">
<div class="container px-6 py-10 mx-auto">
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize xl:text-5xl lg:text-4xl dark:text-white">
What clients saying
</h1>
<div class="flex justify-center mx-auto mt-6">
<span class="inline-block w-40 h-1 bg-blue-500 rounded-full"></span>
<span class="inline-block w-3 h-1 mx-1 bg-blue-500 rounded-full"></span>
<span class="inline-block w-1 h-1 bg-blue-500 rounded-full"></span>
</div>
<div class="flex items-start max-w-6xl mx-auto mt-16">
<button class="hidden p-2 text-gray-800 transition-colors duration-300 border rounded-full dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 lg:block hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<div>
<p class="flex items-center text-center text-gray-500 lg:mx-8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, quam. Odio voluptatem officiis
eos illo! Pariatur, totam alias. Beatae accusamus earum quos obcaecati minima molestias. Possimus
minima dolores itaque! Esse! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea voluptates
fugiat corrupti laudantium dolores reiciendis pariatur esse quod nihil quia cupiditate debitis
quisquam nemo, accusamus animi explicabo? Architecto, unde laboriosam?
</p>
<div class="flex flex-col items-center justify-center mt-8">
<img class="object-cover rounded-full w-14 h-14" src="https://images.unsplash.com/photo-1499470932971-a90681ce8530?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
<div class="mt-4 text-center">
<h1 class="font-semibold text-gray-800 dark:text-white">Mia Brown</h1>
<span class="text-sm text-gray-500 dark:text-gray-400">Marketer</span>
</div>
</div>
</div>
<button class="hidden p-2 text-gray-800 transition-colors duration-300 border rounded-full dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 lg:block hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</section>
</body>
</html>