Created
          January 6, 2021 13:09 
        
      - 
      
- 
        Save njorogejohn/94491e56079a85b9cbb901b0531454e1 to your computer and use it in GitHub Desktop. 
    Tailwind: Landing Page with Image and Text
  
        
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | //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"; | |
| } | 
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | <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