In this project, we will be designing a basic template for a Shoe company using Tailwind CSS & JavaScript. The ultimate goal of creating a visually appealing website with Tailwind CSS is to effectively market the company's products and brand while providing a satisfying and memorable user experience.
Prerequisites
Approach
- Create an HTML file named index.html and link the Tailwind CSS stylesheet for styling.
- Design a basic structure including a navigation bar with Home, About, Features, Contact links and a search bar with a search button for filtering shoes.
- Implement a shopping cart section with an initial total bill of $0.00.
- Create a file named script.js.
- Implement methods for displaying the shoes, searching shoes and when a user selects any shoe article update the bill amount. Also implement the feature of removing the articles from the shopping cart.
- Make the app responsive using Tailwind CSS classes.
Example: This example shows the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css"
rel="stylesheet">
<title>Shoe Company Template</title>
</head>
<body>
<h1 class="text-3xl text-center
text-blue-500 font-bold mb-4">
SHOE COMPANY
</h1>
<nav class="flex items-center py-4
sticky top-0 bg-white z-10">
<ul class="flex-1 text-center">
<li class="list-none inline-block px-5">
<a href="#"
class="no-underline text-black
hover:text-blue-500 transition-colors
duration-300 font-bold">
Home
</a>
</li>
<li class="list-none inline-block px-2">
<a href="#"
class="no-underline text-black
hover:text-blue-500 transition-colors
duration-300 font-bold">
About
</a>
</li>
<li class="list-none inline-block px-2">
<a href="#"
class="no-underline text-black
hover:text-blue-500 transition-colors
duration-300 font-bold">
Features
</a>
</li>
<li class="list-none inline-block px-2">
<a href="#"
class="no-underline text-black
hover:text-blue-500 transition-colors
duration-300 font-bold">
Contact
</a>
</li>
<li class="list-none inline-block px-2">
<form class="flex items-center">
<input type="text" id="searchInput"
class="w-64 h-8 pl-2 pr-4
rounded-l-lg border border-gray-300
focus:outline-none focus:border-blue-500"
placeholder="Search..."
aria-label="Search shoes">
<button class="w-20 h-8 bg-blue-500
text-white rounded-r-lg hover:bg-blue-600
transition-colors duration-300"
type="button"
onclick="filterShoes()">
Search
</button>
</form>
</li>
</ul>
</nav>
<div class="h-auto bg-white p-10">
<ul id="shoe-list"
class="flex flex-wrap justify-center align-center gap-10">
</ul>
</div>
<div id="cart" class="w-1/3 p-4 bg-gray-100">
<h2 class="text-xl font-bold mb-4">
Shopping Cart
</h2>
<ul id="cart-items"></ul>
<div id="total-bill" class="mt-4">
Total Bill: $0.00
</div>
</div>
<script src="script.js"></script>
</body>
</html>