use tailwind css

Title: One Way to Use Tailwind CSS

Tailwind CSS is a unique approach to design and style your web page without leaving your HTML. It is a utility-first CSS framework packed with classes such as flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Code Snippet: Using Tailwind CSS for Basic Page Layout

<div class="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
    <div class="flex-shrink-0">
        <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
    </div>
    <div>
        <div class="text-xl font-medium text-black">ChitChat</div>
        <p class="text-gray-500">You have a new message!</p>
    </div>
</div>

Code Explanation for Using Tailwind CSS for Basic Page Layout

The code above is a simple layout in HTML that uses Tailwind CSS. The layout is a card with logo on the left and title text on the right. We will go through each part of the code to understand what it does:

1. <div class="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">: This is the outermost div of our card. We use several Tailwind classes here to style it:

• p-6 gives the div a padding all around of 1.5rem.
• max-w-md sets the max-width to 28rem.
• mx-auto centers the div horizontally.
• bg-white sets a white background.
• rounded-xl provides large rounded corners.
• shadow-md provides a medium shadow to the card.
• flex makes the div a flex container, which will let the child elements (the logo and the text) sit side by side.
• items-center vertically aligns the centered items inside the div
• space-x-4 puts a 1rem space in between the horizontal children.

2. <div class="flex-shrink-0"> and <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">: This is our logo. It will not shrink and has a static height and width of 3rem.

3. <div> and its child elements: This is the text portion of our card. Using text-xl and font-medium for the title text, it appears as extra-large and medium-weight. The text-gray-500 class makes the message text gray.

By using utility classes offered by Tailwind CSS, styling inside the HTML markup becomes intuitive and easy. Try experimenting with other classes in your project to create complex and beautiful designs.