-
Notifications
You must be signed in to change notification settings - Fork 371
/
Copy pathhero-minimal-meditate.html
21 lines (21 loc) · 1.56 KB
/
hero-minimal-meditate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="flex items-center justify-center min-h-screen bg-white min-w-screen">
<div class="flex flex-col flex-col-reverse items-center justify-center mx-auto lg:flex-row lg:max-w-4xl lg:p-0">
<div class="container flex flex-col w-full px-5 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
<h1 class="font-sans text-4xl font-extrabold leading-none text-black sm:text-5xl xl:text-6xl sm:text-center lg:text-left">
<span class="text-gray-800">Stay focused</span>
<span class="block text-blue-400">and know yourself.</span>
</h1>
<p class="mt-6 text-base text-gray-600 xl:text-lg s">Your guide to mental health and happiness. How about
try to meditate? Start to meditate just 5 min per day and see the results.</p>
<div class="items-center justify-center m-10 rflex">
<a href="#_" class="flex items-center self-start justify-center px-5 py-3 text-base font-medium leading-tight text-white bg-blue-800 border border-transparent rounded-lg shadow md:py-4 md:text-lg xl:text-xl md:px-10">
Come with us
</a>
</div>
</div>
<div class="px-5 md:w-2/3 lg:w-1/2">
<img src="https://images.unsplash.com/photo-1554244933-d876deb6b2ff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1480&q=80"
alt="Illustration of person meditating" class="object-cover w-full h-50">
</div>
</div>
</div>