In this blog, we will be creating a Nike Shoe card with HTML and TailWindCSS.
UI of our Project
Our UI of this project will look like this,
As your can see we are going to create this UI with HTML and TailwindCSS.
Adding a Boiler Plate to our Index.html
First, we will create a Index.html file and then we will add a html:5 Boiler Plate or a snippet, and give it a title NIKE SHOE CARD.
Adding the structure of our Project
So, we will be having 1 main container in that there would be 2 containers namely upper and lower section. In the upper section we will be adding the title, description, price, image and the "AIR" text at the background.
Starting with Styling our Page
First, we will be centering the main container because our card is in the center and will be adding the backgorund color and will be specifying the height of the body.
Upper Section
Now we will add the height and width of our main container or the card container.
As we add the height and width of the container we will be adding logo image using URL and will be adding the price of the shoe on our card.
The URL which we are going to use for the Logo is https://i.ibb.co/q7RKcZk/nike.png.
Then we will give the width of 60px to the logo and give text a 18px of size.
Now we will align the logo and the price to the end of the card.
Now we will style the upper section.
As we need all the content in the center we will be centering and adding the necessary classes to style it.
Now we will move to the title and description section.
We will add the title and description and then give the container width of 345px and give the title 20px and 14px of size to description.
We are done with the title and description section and we will move to the Air section .
We will give it a text of "Air" then we will add the text color, size and give it a negative margin so that it will move upwards then we will reduce its opacity and give it a width of 400px then we will center the p tag which inside this container using flex property and at last we will give it a property of overflow-hidden so that the part of Air text which is overflowing will be hidden.
Now we will move to Shoe Image section.
The shoe image URL which we are going to use is, https://i.ibb.co/R0Y8T8r/nike19.png.
Now we will add the URL, alt text and styling to it.
We will give the image a width of 500px, positioning of 110px from bottom then we will give it a property of absolute so that the image is disconnected from the current parent and will come on the top of everything. Then we will have the property of relative to the Air Section so that the position will be relative to its parent.
Now we are completed with the Upper Section.
Lower Section
Now we will give background color, height and center all the content of lower section.
We will add the necessary styling to the container which contains a Button and a text.
We will add the style to all the 3 divisoins which are the contianer, button and the text.
So we are done with all the styling of our Project.
So our final output will look like this,
So, in this blog, we create a Nike Shoe Card with HTML and TailwindCSS. There is much more to learn about the use of TailwindCSS in ReactJS, explore this topic and its used cases and elevate your skills.
Adios Amigos 👋👋