In this article we will see how to create responsive website or landing page using tailwind css tailblocks let's talk about 10 JavaScript Features without wasting your time.
<!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>Your Title</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<!-- Copy above tailwind css CDN(Content Delivery Network) -->
</head>
<body>
</body>
</html>First of all open your open your code edititor and paste this above tailwind css link in your project.
After pasting this tailwind css link open your browser and search tailblocks or you can also click this link https://tailblocks.cc/
See in the left side various type of components or blocks are there select your components according your requirements.
After selecting your components or blocks click on view code button in top.
After clicking on view code button click on copy to clipboard button for copy this below code.
<!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>Your Title</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<!-- Copy above tailwind css CDN(Content Delivery Network) -->
</head>
<body>
<!-- Paste code here -->
</body>
</html>Paste this code inside your body tag in your html file.
Use tailwind css classes for applying background color , text color and so on. if you are not knowing what is tailwind css classes then click on this link https://tailwind.build/classes/ to see all the tailwind css classes.
After applying background color, text color in your website or landing page your website will look like this with reponsive. See this below video.
0 Comments
Enter Your Comment