DEV Community

Cover image for How I built the "Bio Links" Page using Tailwind CSS
CodeWithKenn
CodeWithKenn

Posted on

How I built the "Bio Links" Page using Tailwind CSS

Hey, there!
This is Kenn, Your Daily Advocate, Business Partner, and Friend from CodeWithKenn!
Welcome to the Blog! Make yourself at home!

2d4334631b43f3ae0478e6fb959cab27.jpg

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;
}

Enter fullscreen mode Exit fullscreen mode
  • 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: [],
}

Enter fullscreen mode Exit fullscreen mode

Let's goooooooooooooooo!

Design Concept

Our Page is made of Three parts:

  • User Profile

  • The Social Media Section

  • The Footer

TailwindCSS-Bio-Link-3.jpg

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>


Enter fullscreen mode Exit fullscreen mode

Output

TailwindCSS-Bio-Link-2.jpg

Tailwind CSS Playground Link

easy-win-5bbf85.jpg

⚡ You can get the Source Code here 👉 Link to Tailwind Play

TailwindCSS Related Resources

TailwindCSS Official Docs

TailwindCSS Lab Youtube

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)

Collapse
 
yummikus profile image
yummikus

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.

Collapse
 
codewithkenn profile image
CodeWithKenn

hey! try using Linktree