Hey, there!
This is Kenn, Your Daily Advocate, Business Partner, and Friend from CodeWithKenn!
Welcome to the Blog! Make yourself at home!
In this article, I'm about to show you how easy it is to build a "Bio Links" Page using HTML and Tailwind CSS in less than 5 minutes.
Feel free to follow me for more related articles. 🙏
Make sure you have checked my previous Tailwind CSS articles in this link to see another card design I've made.
Before starting:
I'm using TailwindCSS Playground to make things easier (Link below)
I've added the font in the CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
font-family: 'Poppins', sans-serif;
}
- I've used custom-color added in my Tailwind Config file:
module.exports = {
theme: {
extend: {
// ...
colors: {
mirage: {
DEFAULT: '#192734',
50: '#769BBD',
100: '#648EB5',
200: '#4B749B',
300: '#3A5B79',
400: '#2A4156',
500: '#192734',
600: '#080D12',
700: '#000000',
800: '#000000',
900: '#000000',
},
},
},
},
plugins: [],
}
Let's goooooooooooooooo!
Design Concept
Our Page is made of Three parts:
User Profile
The Social Media Section
The Footer
Code Snippets
<div class="mx-5">
<div class="">
<!-- User Profile Picture -->
<div class="max-w-sm h-auto mx-auto my-20 rounded-sm overflow-hidden shadow-lg bg-mirage-500">
<img class="object-cover rounded-full h-24 w-24 mx-auto mt-8 p-1 border-4 border-yellow-500" src="https://avatars.githubusercontent.com/u/67477516?v=4" alt="Kenn Kibadi Picture" />
<div class="px-6 py-4 text-white">
<div class="flex flex-col">
<div class="font-bold text-xl text-center hover:cursor-pointer">@KennKibadi</div>
<p class="text-sm text-center">Software Engineer</p>
</div>
</div>
<!-- Social Media Links -->
<div class="flex flex-col mx-auto text-mirage-500">
<a href="https://twitter.com/KennKibadi" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-twitter my-auto" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
<h4 class="my-auto font-semibold mx-5">Twitter</h4>
</a>
<a href="https://www.youtube.com/channel/UCAYruOydWaqSRnJqKPzR4Ag" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" />
</svg>
<h4 class="my-auto font-semibold mx-5">Youtube</h4>
</a>
<a href="https://github.com/KennStack01" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
<h4 class="my-auto font-semibold mx-5">Github</h4>
</a>
<a href="https://www.instagram.com/codewithkenn_/" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
<h4 class="my-auto font-semibold mx-5">Instagram</h4>
</a>
<a href="https://www.facebook.com/Code-With-Kenn-104376625415201" target="__blank" class="flex flex-row mx-auto my-2 bg-white w-2/4 text-mirage-500 py-2 pl-2 rounded-md hover:border-r-yellow-500 border-r-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
<h4 class="my-auto font-semibold mx-5">Facebook</h4>
</a>
</div>
<!-- Footer -->
<div class="text-white text-xs text-center mt-12 mb-4">Built by <a href="https://dev.to/codewithkenn" target="__blank" class="border-b-yellow-500 border-b-2"> CodeWithKenn</a></div>
</div>
</div>
</div>
Output
Tailwind CSS Playground Link
⚡ You can get the Source Code here 👉 Link to Tailwind Play
TailwindCSS Related Resources
Before you go!
Stay tuned! More articles are coming out! Feel free to follow, comment, and share the articles to support me 🤙
🌎 Let's connect
Want to start blogging? 🔥Join NOW!
Top comments (2)
It's easier to do this through additional services, rather than sitting down to do everything yourself. I created a shop link in bio through this service. Very happy with it, you can quickly change the design of the page where the links will be placed. I did everything in our brand colors, added a description and logo. I chose this service because of the powerful analysis. It carefully monitors the traffic that comes from each link and then you can find out the target audience, more accurate for our product.
hey! try using Linktree