&w=3840&q=75)
Details create the big picture. – Sanford I. Weill
Let's try to create something cool.
Introduction
Create New Project
In your terminal run the following npm command to create a Next.js project with Tailwindcss setup. Fire up your Vs code editor with 'code .', head over to the 'index.js' file and let's write some code.
We will be using the Hero icons package for all icons of this build so make sure to install it as well.
Build the Layout
As you notice in the picture above, we have a simple card with an image, a section with text and buttons. In addition to a warning card with icons and text initially hidden. You can use any way of positioning that you are comfortable with. We chose flex for its simplicity as you can see in the code below.
Warning card:
Reservation card:
Global Styling
Now after the layout part is done, we need to create global styling to make our code reusable and well structured. For that create a new folder named 'Styling' in the high-level directory with the 'globall.css' file in it. Introducing some required tailwind CSS libraries. Using the layer directive you can create custom styling classes. Make sure to import the global styling file in the 'app.js' file in order to use it in lower-level components. Now we can create our main styling classes such as 'table', 'person' ...
Component State
We have buttons that need to be triggered: easy! The component state is the solution! In the index file grab your 'UseState' hook and let's initialize it like so. We need two functions to increase and decrease our counter state. All you need to do now is to assign these two functions to the buttons using the onClick method.
Conditional Styling
There you go. Now the fun part begins finally. Bring your design to life with conditional styling.
Global styling classes will make it even easier!
Let's start with the table!
Person class too
This is an example of the second person. I'll let you try to complete this section with the same logic.
What about the cards
Warning card:
Reservation card:
...and finally just to add a cool UX touch for the card buttons
Conclusion
That's it for today's blog post. There is no limit to creativity so make sure to try it and feel free to add more, Also if you need help, take a look at the Github repository where you can find the full version code! Any questions or suggestions? Get in touch by email or Instagram DMs.
Enjoyed this article? Consider sharing it.