Learn how to create an eye-catching author bio block with avatar using HTML and Tailwind CSS. Follow our step-by-step guide using HTML and Tailwind CSS.
Table of Contents
Imagine browsing a website and stumbling upon an article that captures your interest. As you scroll down, you notice a small section about the author—perhaps a photo, a brief description, and some background information. That's what we call an author bio block.
An author bio block serves as a virtual handshake, introducing the person behind the content to the reader. It's not just about sharing a name; it's about establishing credibility, building trust, and fostering a connection with the audience. Whether you're a blogger, a freelancer, or a business owner, having an engaging author bio block can make a significant difference in how your audience perceives you.
In this guide, we'll take you through the process of creating an author bio block with an avatar using HTML and Tailwind CSS. Don't worry if you're unfamiliar with these terms; we'll explain everything step by step. By the end of this tutorial, you'll have a personalized author bio block that reflects your unique identity and resonates with your readers.
Source Code
Step 1 (HTML Code):
Begin by structuring the HTML for your author bio block. Utilize semantic elements like <div> and <span> to organize the content effectively. Let break down the code step by step:
<!DOCTYPE html>: This declaration specifies the document type and version of HTML being used.
<html lang="en">: This tag denotes the beginning of the HTML document and specifies the language as English.
<head>: This section contains meta-information about the HTML document, such as character encoding, viewport settings, and title.
<meta charset="UTF-8" />: Specifies the character encoding of the document to be UTF-8, which supports a wide range of characters from different languages.<meta http-equiv="X-UA-Compatible" content="IE=edge" />: Instructs Internet Explorer to use the latest rendering engine available.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport to the width of the device's screen and sets the initial zoom level to 1.<title>Author Bio with Avatar using Tailwind</title>: Sets the title of the web page displayed in the browser's title bar or tab.<link rel="preconnect" href="https://fonts...om" />: Specifies a resource to be used in the document, in this case, a preconnect link to Google Fonts.<link rel="preconnect" href="https://fonts.googleapis../>: Another preconnect link to Google Fonts with crossorigin attribute.<link href="https://fonts.googleapi....mp;display=swap" rel="stylesheet" />: Links to the Inter font family from Google Fonts to be used in the document.<script src="https://cdn.tailwin...om"></script>: Loads the Tailwind CSS framework from a CDN.
<body style="font-family: Inter" class="p-5 bg-white dark:bg-gray-900 antialiased">: Defines the body of the HTML document. It sets the font family to Inter and applies Tailwind CSS classes for padding, background color, and anti-aliasing.
<div class="flex flex-col md:flex-row gap-4 items-center border border-black p-2 rounded">: This creates a div element with Tailwind CSS classes to style it. It sets up a flex container with a column layout on small screens and a row layout on medium screens and above. It adds a border, padding, and rounded corners.<img width="200" height="200" class="rounded-full" title="Srushti Shah" alt="author bio - srushti-shah" src="https://www.codewithfaraz.com/favicon.ico" loading="lazy">: This is an image tag displaying an avatar. It specifies the width and height, adds a rounded border, sets the title and alt attributes for accessibility, and provides the image source.<p><strong>Author’s Bio</strong>-<i>This is Faraz Choudhary admin of codewithFaraz.com...</i></p>: This paragraph tag contains the author's bio. It includes strong and italic tags for emphasis and hyperlinks to social media profiles.<a href="https://x.com/codewithfaraz" target="_blank" class="underline font-bold">X</a>: Hyperlink to a website with target attribute set to "_blank" for opening in a new tab, and Tailwind CSS classes for styling.<a href="https://www.linkedin.com/in/farazc60/" rel="nofollow" target="_blank" class="underline font-bold">LinkedIn</a>: Another hyperlink, this time to a LinkedIn profile, with similar attributes and styling.
Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js LibraryStep 2 (CSS Code):
No custom CSS thanks to Tailwind!
/*
No custom CSS thanks to Tailwind!
tailwindcss.com
*/ Final Output:
See the Pen Tailwind Author Bio with Avatar by Faraz (@codewithfaraz) on CodePen.
Conclusion:
Congratulations! You've successfully learned how to craft an engaging author bio block with an avatar using HTML and Tailwind CSS.
By following the instructions outlined in this guide, you've taken a significant step towards creating a more personalized and engaging website experience for your visitors. Remember to experiment with different styles and customization options to make your author bio block truly stand out. Thank you for joining us on this journey, and we wish you all the best in implementing what you've learned!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
