Published on

Make A Recent Article With Tailwind CSS Like A Pro With The Help Of These 6 Tips

Tags
Recent article

As a FrontEnd developer, you may have heard of Tailwind CSS, a utility-first CSS framework that allows you to quickly build custom designs without writing any CSS. In this article, we will explore how to use Tailwind CSS to create a Recent Article UI component like a pro.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that you can use to style your HTML elements. It is designed to be highly customizable, allowing you to create unique designs without writing any CSS.

The description of Recent article UI component

A Recent Article UI component is a common design element that displays a list of the most recent articles on a website. It typically includes the article title, author, date, and a thumbnail image.

Why use Tailwind CSS to create a Recent article UI component?

Tailwind CSS provides a set of pre-defined CSS classes that make it easy to create a custom Recent Article UI component. By using Tailwind CSS, you can quickly style your HTML elements without writing any CSS.

The preview of Recent article UI component

To create a Recent Article UI component with Tailwind CSS, we will use a combination of flexbox, grid, and responsive design. The final result will be a responsive grid of articles that looks great on any device.

Free download of the Recent article's source code

The source code of Recent article UI component

To create a Recent Article UI component with Tailwind CSS, we will use a combination of HTML and Tailwind CSS classes. The final result will be a set of HTML elements with Tailwind CSS classes that style the elements.

<style>
  .w-70 {
    width: 20rem;
	}
</style>

<section class="blog text-gray-700 body-font">
      <div class="container px-5 py-24 mx-auto">
        <div class="flex flex-wrap w-full mb-20 flex-col items-center text-center">
          <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900"> Blog</h1>
          <p class="lg:w-1/2 w-full leading-relaxed text-base">
            J'aime bien partager mes connaissances et des recherche intéressantes, pour le faire j'ai mis en place un blog personnel.
						Nous abordons plusieurs sujets intéressants et je donne quelques astuces et conseils aux jeunes développeurs pour mieux s'en sortir.          </p>
        </div>
        <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
          <div class="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col justify-center items-center max-w-sm mx-auto">
            <div class="bg-gray-300 h-56 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1521185496955-15097b20c5fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"></div>

            <div class=" w-70 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden p-5">
              
              <div class="header-content inline-flex ">
                <div class="category-badge flex-1  h-4 w-4 m rounded-full m-1 bg-purple-100">
                  <div class="h-2 w-2 rounded-full m-1 bg-purple-500 " ></div>
                </div>
                <div class="category-title flex-1 text-sm"> PHP</div>
              </div>
              <div class="title-post font-medium">Mon titre</div>

              <div class="summary-post text-base text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis veritatis vel suscipit ex dolore possimus iure. 
                <button class="bg-blue-100 text-blue-500 mt-4 block rounded p-2 text-sm "><span class="">Lire plus</span></button>
              </div>
             
            </div>
          </div>

          <div class="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col justify-center items-center max-w-sm mx-auto">
            <div class="bg-gray-300 h-56 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1543966888-7c1dc482a810?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"></div>

            <div class=" w-70 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden p-5">
              
              <div class="header-content inline-flex ">
                <div class="category-badge flex-1  h-4 w-4 m rounded-full m-1 bg-yellow-100">
                  <div class="h-2 w-2 rounded-full m-1 bg-yellow-500 " ></div>
                </div>
                <div class="category-title flex-1 text-sm"> JS</div>
              </div>
              <div class="title-post font-medium">Mon titre</div>

              <div class="summary-post text-base text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis veritatis vel suscipit ex dolore possimus iure. 
                <button class="bg-blue-100 text-blue-500 px-2 mt-4 block rounded p-2 text-sm"><span class="">Lire plus</span></button>
              </div>
             
            </div>
          </div>

          <div class="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col justify-center items-center max-w-sm mx-auto">
            <div class="bg-gray-300 h-56 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1590608897129-79da98d15969?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"></div>

            <div class=" w-70 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden p-5">
              
              <div class="header-content inline-flex ">
                <div class="category-badge flex-1  h-4 w-4 m rounded-full m-1 bg-green-100">
                  <div class="h-2 w-2 rounded-full m-1 bg-green-500 " ></div>
                </div>
                <div class="category-title flex-1 text-sm"> Vue</div>
              </div>
              <div class="title-post font-medium">Mon titre</div>

              <div class="summary-post text-base text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis veritatis vel suscipit ex dolore possimus iure. 
                <button class="bg-blue-100 text-blue-500 px-2 mt-4 block rounded p-2 text-sm"><span class="">Lire plus</span></button>
              </div>
             
            </div>
          </div>
         
        </div>
      </div>
    </section>

How to create a Recent article with Tailwind CSS?

Here are 6 tips to help you create a Recent Article UI component with Tailwind CSS like a pro:

1. Use Flexbox to create a responsive layout

Flexbox is a powerful layout tool that allows you to create flexible and responsive layouts. To create a Recent Article UI component, we will use flexbox to create a responsive grid of articles.

2. Use Grid to create a consistent layout

Grid is another powerful layout tool that allows you to create consistent layouts. To create a Recent Article UI component, we will use grid to create a consistent layout for the article elements.

3. Use Responsive Design to make your component mobile-friendly

Responsive design is essential for creating a mobile-friendly UI component. To make your Recent Article UI component mobile-friendly, we will use responsive design to adjust the layout and styling of the component for different screen sizes.

4. Use Tailwind CSS classes to style your HTML elements

Tailwind CSS provides a set of pre-defined CSS classes that you can use to style your HTML elements. To style your Recent Article UI component, we will use Tailwind CSS classes to add color, typography, and spacing to the component.

5. Use Custom CSS to add unique styling

Tailwind CSS is highly customizable, allowing you to add your own custom CSS to your components. To add unique styling to your Recent Article UI component, we will use custom CSS to add a hover effect to the article elements.

6. Use a CSS preprocessor to make your code more maintainable

A CSS preprocessor is a tool that allows you to write CSS in a more maintainable way. To make your Recent Article UI component more maintainable, we will use a CSS preprocessor like Sass or Less to write our CSS.

Conclusion

Tailwind CSS is a powerful tool that allows you to quickly create custom UI components without writing any CSS. By following these 6 tips, you can create a Recent Article UI component with Tailwind CSS like a pro. With its flexibility and customization options, Tailwind CSS is a great choice for any FrontEnd developer looking to create custom designs quickly and easily.