In this website I used Tailwind Css & Tail blocks as a Css framework it is very easy to use and efficient. If you are in hurry and you have to make any website in a small period of time then you should definitely check this out.
step1: Go to tailwindcss.com website and then click on get started after that go to installation process and scroll the bar down and you will see using tailwind via CDN. and there is an link just copy it and paste in your Markup.
step2: Here you are ready to use tailwind css .. Now, Go to Tailblocks page and use there different types of components.
<!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">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header class="text-gray-600 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-pink-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Rawat's Kitchen</span>
</a>
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:text-gray-900">Home</a>
<a class="mr-5 hover:text-gray-900">Menu</a>
<a class="mr-5 hover:text-gray-900">Contact Us</a>
<a class="mr-5 hover:text-gray-900">Reviews</a>
</nav>
<button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">Order Now
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>
<section class="text-gray-600 body-font">
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Meet, Eat & Enjoy
<br class="hidden lg:inline-block">the true test
</h1>
<p class="mb-8 leading-relaxed">Making a reservation at Delicious restaurant is easy and takes just a couple of minutes.</p>
<div class="flex justify-center">
<button class="inline-flex text-white bg-pink-500 border-0 py-2 px-6 focus:outline-none hover:bg-pink-600 rounded text-lg">Open menu</button>
<button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Watch video</button>
</div>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img class="object-cover object-center rounded" alt="hero" src="https://source.unsplash.com/720x600/?Burger,pizza,indian food">
</div>
</div>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap">
<div class="flex w-full mb-20 flex-wrap">
<h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900 lg:w-1/3 lg:mb-0 mb-4">Best way to eat
<br class="hidden lg:inline-block"> healthy food.
</h1></h1>
<p class="lg:pl-6 lg:w-2/3 mx-auto leading-relaxed text-base">Making a reservation at Delicious restaurant is easy and takes just a couple of minutes.</p>
</div>
<div class="flex flex-wrap md:-m-2 -m-1">
<div class="flex flex-wrap w-1/2">
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://source.unsplash.com/500x300/?hamburger">
</div>
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src=" https://source.unsplash.com/501x301/?coffee">
</div>
<div class="md:p-2 p-1 w-full">
<img alt="gallery" class="w-full h-full object-cover object-center block" src="https://source.unsplash.com/600x360/?indianfood">
</div>
</div>
<div class="flex flex-wrap w-1/2">
<div class="md:p-2 p-1 w-full">
<img alt="gallery" class="w-full h-full object-cover object-center block" src=" https://source.unsplash.com/601x361/?sandwiches">
</div>
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://source.unsplash.com/502x302/?meal">
</div>
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src=" https://source.unsplash.com/503x303/?pizza">
</div>
</div>
</div>
</div>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900">Pricing</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">We promise you to give the best service. <br> Eat Tasty , Be Happy..</p>
</div>
<div class="lg:w-2/3 w-full mx-auto overflow-auto">
<table class="table-auto w-full text-left whitespace-no-wrap">
<thead>
<tr>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">Menu</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Item</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Quantity</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Price</th>
<th class="w-10 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tr rounded-br"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3">Pizza</td>
<td class="px-4 py-3">Large Size</td>
<td class="px-4 py-3">1</td>
<td class="px-4 py-3 text-lg text-gray-900"> Rs.500</td>
<td class="w-10 text-center">
<input name="plan" type="radio">
</td>
</tr>
<tr>
<td class="border-t-2 border-gray-200 px-4 py-3">Cheese Burger</td>
<td class="border-t-2 border-gray-200 px-4 py-3">Medium Size</td>
<td class="border-t-2 border-gray-200 px-4 py-3">5</td>
<td class="border-t-2 border-gray-200 px-4 py-3 text-lg text-gray-900">Rs. 250</td>
<td class="border-t-2 border-gray-200 w-10 text-center">
<input name="plan" type="radio">
</td>
</tr>
<tr>
<td class="border-t-2 border-gray-200 px-4 py-3">Coffee</td>
<td class="border-t-2 border-gray-200 px-4 py-3">Cold/Hot</td>
<td class="border-t-2 border-gray-200 px-4 py-3">3</td>
<td class="border-t-2 border-gray-200 px-4 py-3 text-lg text-gray-900">Rs.200</td>
<td class="border-t-2 border-gray-200 w-10 text-center">
<input name="plan" type="radio">
</td>
</tr>
<tr>
<td class="border-t-2 border-b-2 border-gray-200 px-4 py-3">Full Thali</td>
<td class="border-t-2 border-b-2 border-gray-200 px-4 py-3">Indian Food</td>
<td class="border-t-2 border-b-2 border-gray-200 px-4 py-3">12</td>
<td class="border-t-2 border-b-2 border-gray-200 px-4 py-3 text-lg text-gray-900">Rs.720</td>
<td class="border-t-2 border-b-2 border-gray-200 w-10 text-center">
<input name="plan" type="radio">
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
<a class="text-pink-500 inline-flex items-center md:mb-2 lg:mb-0">See More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
<button class="flex ml-auto text-white bg-pink-500 border-0 py-2 px-6 focus:outline-none hover:bg-pink-600 rounded">Order Now</button>
</div>
</div>
</section>
<section class="text-gray-600 body-font relative">
<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
<div class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
<iframe class="absolute inset-0" style="filter: grayscale(1) contrast(1.2) opacity(0.4);" title="map" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed" width="100%" height="100%" frameborder="0"></iframe>
<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
<div class="lg:w-1/2 px-6">
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2>
<p class="mt-1">Photo booth tattooed prism, portland taiyaki hoodie neutra typewriter</p>
</div>
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
<a class="text-pink-500 leading-relaxed">example@email.com</a>
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
<p class="leading-relaxed">123-456-7890</p>
</div>
</div>
</div>
<div class="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
<h1 class="text-gray-900 text-lg mb-1 font-medium title-font">Book a table</h1>
<p class="leading-relaxed mb-5 text-gray-600">Making a reservation at Délicious restaurant is easy and takes just a couple of minutes.</p>
<div class="relative mb-4">
<label for="name" class="leading-7 text-sm text-gray-600" >Name</label>
<input type="text" id="name" name="name" class="w-full bg-white rounded border border-gray-300 focus:border-pink-500 focus:ring-2 focus:ring-pink-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" placeholder="Name Of Guest">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Phone no.</label>
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-pink-500 focus:ring-2 focus:ring-pink-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative mb-4">
<label for="message" class="leading-7 text-sm text-gray-600">Message</label>
<textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-pink-500 focus:ring-2 focus:ring-pink-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
</div>
<button class="text-white bg-pink-500 border-0 py-2 px-6 focus:outline-none hover:bg-pink-600 rounded text-lg">Sent Request</button>
<p class="text-xs text-gray-500 mt-3">Making a reservation at Délicious restaurant is easy and takes just a couple of minutes..</p>
</div>
</div>
</section>
<footer class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
<div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-pink-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Rawat's Kitchen</span>
</a>
<p class="mt-2 text-sm text-gray-500">Making a reservation at Délicious restaurant is easy and takes just a couple of minutes..</p>
</div>
<div class="flex-grow flex flex-wrap md:pr-20 -mb-10 md:text-left text-center order-first">
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Quick Links</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">Home</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Menu</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Quick Links</h2>
<nav class="list-none mb-10">
<a class="text-gray-600 hover:text-gray-800">Contact Us</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Reviews</a>
</li>
</nav>
</div>
</div>
</div>
<div class="bg-gray-100">
<div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p class="text-gray-500 text-sm text-center sm:text-left">© 2020 Rawat"s Kitchen —
<a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-600 ml-1" target="_blank">@rawat2123</a>
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
<a class="text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
</footer>
</body>
</html>
0 Comments