Skip to content

Instantly share code, notes, and snippets.

@njorogejohn

njorogejohn/index.css

Created January 6, 2021 13:09
Show Gist options
  • Save njorogejohn/94491e56079a85b9cbb901b0531454e1 to your computer and use it in GitHub Desktop.
Save njorogejohn/94491e56079a85b9cbb901b0531454e1 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind: Landing Page with Image and Text
Raw
index.css
//also use: https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css
@import url('https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,400;0,900;1,500&display=swap');
body {
font-family: "Muli";
}
Raw
landing.html
<div class="flex flex-wrap">
<div class="w-full sm:w-8/12 mb-10">
<div class="container mx-auto h-full sm:p-10">
<nav class="flex px-4 justify-between items-center">
<div class="text-4xl font-bold">
Plant<span class="text-green-700">.</span>
</div>
<div>
<img src="https://image.flaticon.com/icons/svg/497/497348.svg" alt="" class="w-8">
</div>
</nav>
<header class="container px-4 lg:flex mt-10 items-center h-full lg:mt-0">
<div class="w-full">
<h1 class="text-4xl lg:text-6xl font-bold">Find your <span class="text-green-700">greeny</span> stuff for your room</h1>
<div class="w-20 h-2 bg-green-700 my-4"></div>
<p class="text-xl mb-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae maiores neque eaque ea odit placeat, tenetur illum distinctio nulla voluptatum a corrupti beatae tempora aperiam quia id aliquam possimus aut.</p>
<button class="bg-green-500 text-white text-2xl font-medium px-4 py-2 rounded shadow">Learn More</button>
</div>
</header>
</div>
</div>
<img src="https://images.unsplash.com/photo-1536147116438-62679a5e01f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Leafs" class="w-full h-48 object-cover sm:h-screen sm:w-4/12">
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment