Creating a Complete Article Design
Learn how to create a complete article design.
We'll cover the following...
In this lesson, we’ll explore how to create a complete article/post design, employing Tailwind utility classes for layout, typography, colors, images, and a bit of interactivity. The final result is shown below.
Press + to interact
The finished layout
Creating the base layout
Let’s do some coding. In the root directory, create a new article.html file with the following content. Click the “Run” button to see our app.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="tailwind.css">
<style>
.box {
color: white;
background-color: green;
min-height: 150px;
padding-top: 10%;
padding-left: 15%;
font-size: 1.5rem;
font-weight: 700;
}
</style>
</head>
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="tailwind.css">
</head>
<body>
<div class="m-6 md:mx-auto p-8 space-y-6 md:w-1/2 xl:w-1/3 bg-sky-50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas varius vitae ipsum et commodo. In scelerisque est
magna, ut fringilla purus congue eu.
Mauris id metus ac metus porta aliquet.
Aliquam quam ipsum, consequat malesuada
lectus nec, blandit condimentum enim.
Donec varius mattis facilisis.
Morbi rhoncus erat vel erat pellentesque
suscipit. Nunc dictum euismod libero sed tristique.</p>
<quote class="px-4 py-2 block border-l-4">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas varius
vitae ipsum et commodo. In scelerisque est magna,
ut fringilla purus congue eu. Mauris id metus ac metus porta
aliquet.</quote>
<p>Aliquam id nulla dignissim felis bibendum aliquam.
Cras vulputate blandit semper.
Nam quam dolor, tincidunt non
odio ac, condimentum molestie justo.
In ornare maximus tortor, aliquam consequat arcu sagittis id.
Vivamus condimentum varius ante, pulvinar laoreet tortor dignissim ac.
Curabitur egestas in arcu sit amet feugiat.
Aenean interdum, purus eget sodales tincidunt,
magna sem lobortis nunc, at porttitor arcu velit sed augue.
Praesent porttitor nisl enim, eget sollicitudin ipsum porta a.
Integer tincidunt, lorem sit amet gravida hendrerit, arcu
felis convallis metus, vitae vehicula diam dolor vulputate sapien.
Nulla finibus lectus nec porta faucibus.
Praesent in massa sollicitudin, dignissim quam at,
volutpat mauris. Morbi in turpis sapien.
Morbi ante est, gravida vitae ipsum quis, pretium scelerisque massa.</p>
<img class="mr-3 w-1/2 float-left rounded" src="./beach.jpeg">
<p>Vestibulum congue felis at posuere commodo.
Praesent sapien magna, aliquet ut efficitur et, luctus at neque.
Donec vitae nunc convallis, maximus ex sit amet, consequat tellus.
Aenean eleifend cursus urna, sed fermentum felis cursus
eget. Sed accumsan hendrerit turpis at ullamcorper.
Integer quam sapien, rutrum ac pharetra eget, maximus id lacus.
Vivamus sollicitudin molestie hendrerit.
Proin sem quam, tempus in felis et, elementum dignissim felis.
Integer odio tellus, semper at commodo at, euismod id magna.
Aenean nisl metus, maximus a eros sit amet, facilisis malesuada
lorem. Mauris est tortor, accumsan ac aliquet et, sagittis vitae velit.
Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Aenean scelerisque urna id dictum tempor.
Pellentesque ipsum orci, convallis eget purus nec, placerat laoreet
nulla. Nullam vitae lectus porta, lacinia neque at, rutrum felis.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Morbi luctus, magna eget gravida lobortis,
elit elit rutrum urna, at volutpat ex orci accumsan urna.
Sed et ligula magna. Ut dignissim semper ligula, at lacinia mi dignissim non.
In eleifend ultricies viverra. Nunc euismod ac lacus ac molestie.
Nam sem lectus, malesuada a ipsum vitae, viverra condimentum elit.
Ut at vulputate tortor, nec suscipit leo.
In non dolor nec purus semper tempus:</p>
<ul class="ml-6 pl-6 space-y-3">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<p>Pellentesque tincidunt non orci id congue.
Donec blandit pulvinar leo et tincidunt.
Sed venenatis venenatis justo, ut congue neque lobortis sit amet.
Nam tempus vehicula nisi, vitae commodo magna condimentum id.
In quis vehicula massa. Fusce id congue lorem.
Duis imperdiet placerat metus, vitae hendrerit lorem sollicitudin sit amet.
Integer varius justo non velit semper elementum.
Donec scelerisque magna nibh, at efficitur elit hendrerit id.
Aenean sagittis lectus odio, eu varius lectus vestibulum eget.
Sed gravida mattis auctor.</p>
<hr>
<div class="flex pt-6">
<img class="mr-6 mb-6 w-24 h-24 rounded border-4 border-b-[16px]" src="./author.jpeg" />
<div>
<p class="-mt-3">David Smith</p>
<p class="mt-2">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas <a href="#"
class="underline underline-offset-1">varius vitae</a> ipsum et commodo.</p>
</div>
</div>
</div>
</body>
</html>Base layout of our application
Note: You can find the output by clicking the URL and the output tab.
We’ve started with creating an article container.
Press + to interact
<div class="m-6 md:mx-auto p-8 space-y-6 md:w-1/2 xl:w-1/3 bg-sky-50"></div>
Line 1: We’ve added some visual space (space-y-6) between all direct children elements. Then we’ve added two width modifiers (md:w-1/2 xl:w-1/3) that will produce the following effect: the article will start at full width at small screens (this is by default) up to medium screens, where the width will change to one and a half. This setting will prevail up to the extra large screens and above, where the width will change to one-third. Also, starting from medium screens and above, the article will be centered, thanks to the md:mx-auto property. ... ...