Published on

The 5 Really Obvious Ways To Create A Politico Clone Layout With Tailwind CSS Better That You Ever Did

Tags
Pages
Politico Clone Layout

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Politico Clone Layout ui component

Just a quick clone of a politico article.

Why use Tailwind CSS to make a Politico Clone Layout ui component?

  • It can make the building process of Politico Clone Layout ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Politico Clone Layout component file.

The preview of Politico Clone Layout ui component

Free download of the Politico Clone Layout's source code

The source code of Politico Clone Layout ui component

<html>
    <head>
        <title>Politico Clone</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/core.min.css">
    </head>
    <body class="relative">
        
        <div class="w-full border-b flex flex-row flex-wrap items-center p-1">
            <div class="w-1/5 p-3">
                <button class="text-2xl font-thin text-gray-600"><i class="fa fa-bars"></i></button>
            </div>
            <div class="w-3/5 p-3">
                <center><img class="w-1/4" src="https://static.politico.com/11/3c/2571c0ab455e91bf81dc4bab93a6/politico-logo.png"></center>
            </div>
            <div class="w-1/5 flex flex-row flex-wrap">
                <ul class="w-3/4 flex flex-row flex-wrap text-xs font-semibold">
                    <li class="mx-3"><a href="">MAGAZINE</a></li>
                    <li class="mx-3"><a href="">THE AGENDA</a></li>
                    <li class="mx-3"><a href="">PRO</a></li>
                </ul>
                <div class="w-1/4 text-lg text-gray-600"><a href=""><i class="fa fa-search"></i></a></div>
            </div>
        </div>

        <div class="w-full md:w-2/5 mx-auto">
            <div class="mx-5 my-3 text-sm">
            <a href="" class=" text-red-600 font-bold tracking-widest">CORONAVIRUS</a>
            </div>
            <div class="w-full text-gray-800 text-4xl px-5 font-bold leading-none">
                Kemp and Bottoms hurl insults at each other in Georgia mask feud
            </div>
            
            <div class="w-full text-gray-500 px-5 pb-5 pt-2">
               The war of words comes after the governor sued the Atlanta mayor over her city’s mask mandate.
            </div>
            
            <div class="mx-5">
            <img src="https://static.politico.com/dims4/default/fcd6d6a/2147483647/resize/1920x/quality/90/?url=https%3A%2F%2Fstatic.politico.com%2F22%2F87%2F2259ffd444678054896b9fa32b4d%2Fgettyimages-1221513169.jpg">
            </div>
            
            <div class="w-full text-gray-600 text-normal mx-5">
                <p class="border-b py-3">Georgia Gov. Brian Kemp speaks to the media during a press conference. | Kevin C. Cox/Getty Images</p>
            </div>
            
            <div class="w-full text-gray-600 font-thin italic px-5 pt-3">
                By <strong class="text-gray-700">Quint Forgey</strong><br>
                07/17/2020 09:57 AM EDT<br>
                Updated: 07/17/2020 10:33 AM EDT
            </div>
            
            <div class="px-5 w-full mx-auto">
                <p class="my-5">Georgia Gov. Brian Kemp and Atlanta Mayor Keisha Lance Bottoms hurled insults at one another Friday, as their legal battle over whether to mandate masks in the state’s capital city entered its second day.</p>
                <p class="my-5">During dueling appearances at a Capitol news briefing and in an interview with CNN, the Republican governor and the Democratic mayor both accused the other’s office of playing politics amid a pandemic that continues to ravage communities across Georgia.</p>
                <p class="my-5">Updating members of the media on the state’s coronavirus response, Kemp defended his decision to sue Atlanta’s mayor and city council in an effort to block local officials there from enforcing an order requiring residents to wear a mask in public.</p>
                <p class="my-5">“Mayor Bottoms’ mask mandate cannot be enforced, but her decision to shutter businesses and undermine economic growth is devastating,” Kemp told reporters in Atlanta, likening his administration’s legal action to “sending in the National Guard.”</p>
                <p class="my-5">“I refuse to sit back and watch as disastrous policies threaten the lives and livelihoods of our citizens,” he said. “We will fight to stop reckless actions and put people over pandemic politics.”</p>
                <p class="my-5">Meanwhile, on CNN, Bottoms dismissed Kemp’s unfolding criticism as “propaganda” and “completely inaccurate,” and called the escalating controversy over face coverings “very bizarre, quite frankly.”</p>
                <p class="my-5">Bottoms also charged that the governor’s lawsuit was politically motivated, remarking that she did not “think it was happenstance” that Kemp pursued litigation one day after President Donald Trump visited Atlanta.</p>
                <p class="my-5">Furthermore, Bottoms alleged the lawsuit represented an act of “personal retaliation.” She noted that other Georgia cities had imposed similar mask orders, and said the governor “sued us personally. He did not sue the city of Atlanta. He filed suit against myself and our city council personally.”</p>
                <p class="my-5">The high-profile clash between two of Georgia’s top leaders came after Kemp issued a statewide order Wednesday banning local mask mandates. But Bottoms said her city’s order requiring face coverings would continue to apply, provoking Kemp to file his lawsuit in state court Thursday.</p>
                <p class="my-5">The feud has served to further elevate the national profile of Bottoms, who revealed this month that she had tested positive for Covid-19 and has attained greater public prominence due to reports that she is being vetted for the role of running mate to presumptive Democratic presidential nominee Joe Biden.</p>
                <p class="my-5">As for Kemp, the rift with Bottoms has dredged up earlier criticisms of his management of Georgia’s coronavirus outbreak.</p>
                <p class="my-5">The governor lifted his stay-at-home order at the end of April after memorably admitting earlier in the month that he had just learned asymptomatic infected people could spread the disease, and state officials were caught misrepresenting Covid-19 reporting data in May.</p>
                <p class="my-5">Kemp’s latest opposition to Bottoms’ order, at a time when even the Trump administration is encouraging deference to local coronavirus directives, has drawn significant criticism. It also diverges from the approaches of Republican governors in Southern states including Alabama, Arkansas and Texas, who have issued statewide mask mandates in recent days.</p>
                <p class="my-5">Kemp’s own lieutenant governor, Republican Geoff Duncan, appeared reluctant to offer a full-throated defense of the governor’s lawsuit Friday, instead repeatedly emphasizing the importance of mask-wearing.</p>
                <p class="my-5">“I hope we move past it,” Duncan told CNN of the ongoing controversy, adding that the “whole conversation around the mandate doesn’t help us get through this. It becomes a distraction [from] the health and well-being of 11 million Georgians.”</p>
                <p class="my-5">Although elected officials averse to mask mandates argue Americans should be able to make their own assessments regarding their safety, public health experts have warned that Covid-19 remains a highly contagious disease — and that those not wearing masks risk infecting other, potentially more vulnerable, people.</p>
            </div>
        </div>
        
        <div class="absolute w-full text-right text-sm bottom-0 p-3 mx-auto text-gray-400">
            Made with <i class="text-red-300 fa fa-heart"></i> By <a href="https://timelydevs.com">Timely Systems</a>
        </div>
    </body>
</html>

How to make a Politico Clone Layout with Tailwind CSS?

Install tailwind css of verion 1.4.6

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.4.6

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to make a Politico Clone Layout component

  • relative
  • w-full
  • border-b
  • flex
  • flex-row
  • flex-wrap
  • p-1
  • w-1/5
  • p-3
  • text-2xl
  • text-gray-600
  • w-3/5
  • w-1/4
  • w-3/4
  • text-xs
  • mx-3
  • text-lg
  • md:w-2/5
  • mx-auto
  • mx-5
  • my-3
  • text-sm
  • text-red-600
  • text-gray-800
  • text-4xl
  • px-5
  • text-gray-500
  • pb-5
  • pt-2
  • text-normal
  • py-3
  • pt-3
  • text-gray-700
  • my-5
  • absolute
  • text-right
  • bottom-0
  • text-gray-400
  • text-red-300

39 steps to make a Politico Clone Layout component with Tailwind CSS

  1. Use relative to position an element according to the normal flow of the document.

  2. Use w-full to set an element to a 100% based width.

  3. Control the border color of an element to b using the border-b utilities.

  4. Use flex to create a block-level flex container.

  5. Use flex to create a block-level flex container.

  6. Use flex to create a block-level flex container.

  7. Control the padding on all sides of an element to 0.25rem using the p-1 utilities.

  8. Use w-1/5 to set an element to a fixed width(1/5).

  9. Control the padding on all sides of an element to 0.75rem using the p-3 utilities.

  10. Control the text color of an element to 2xl using the text-2xl utilities.

  11. Control the text color of an element to gray-600 using the text-gray-600 utilities.

  12. Use w-3/5 to set an element to a fixed width(3/5).

  13. Use w-1/4 to set an element to a fixed width(1/4).

  14. Use w-3/4 to set an element to a fixed width(3/4).

  15. Control the text color of an element to xs using the text-xs utilities.

  16. Control the horizontal margin of an element to 0.75rem using the mx-3 utilities.

  17. Control the text color of an element to lg using the text-lg utilities.

  18. Use md:w-2/5 to set an element to a fixed width(2/5) at only medium screen sizes.

  19. Control the horizontal margin of an element to auto using the mx-auto utilities.

  20. Control the horizontal margin of an element to 1.25rem using the mx-5 utilities.

  21. Control the vertical margin of an element to 0.75rem using the my-3 utilities.

  22. Control the text color of an element to sm using the text-sm utilities.

  23. Control the text color of an element to red-600 using the text-red-600 utilities.

  24. Control the text color of an element to gray-800 using the text-gray-800 utilities.

  25. Control the text color of an element to 4xl using the text-4xl utilities.

  26. Control the horizontal padding of an element to 1.25rem using the px-5 utilities.

  27. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  28. Control the padding on bottom side of an element to 1.25rem using the pb-5 utilities.

  29. Control the padding on top side of an element to 0.5rem using the pt-2 utilities.

  30. Control the text color of an element to normal using the text-normal utilities.

  31. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  32. Control the padding on top side of an element to 0.75rem using the pt-3 utilities.

  33. Control the text color of an element to gray-700 using the text-gray-700 utilities.

  34. Control the vertical margin of an element to 1.25rem using the my-5 utilities.

  35. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  36. Control the text color of an element to right using the text-right utilities.

  37. Use the bottom-0 utilities to set the bottom position of a positioned element to 0rem.

  38. Control the text color of an element to gray-400 using the text-gray-400 utilities.

  39. Control the text color of an element to red-300 using the text-red-300 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Politico Clone Layout components, learn and follow along to implement your own components.