Social.vue

<template>
  <div class="mt-5 py-12 border-t-2 border-gray-100 dark:border-gray-800 max-w-6xl mx-auto">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="lg:text-center">
        <p
          class="
             dark:text-gray-100
            text-gray-900 text-3xl
            tracking-tight
            font-bold
          "
        >
          Socials
        </p>
        <p
          class="mt-3
          max-w-md
          mx-auto
          text-base text-gray-500
          dark:text-gray-400
          sm:text-lg
          md:mt-5
          md:text-xl
          md:max-w-3xl
          cursor-default"
        >
          Follow us to get notified about our sessions, events and competitions!
        </p>
      </div>

      <div class="mt-10">
        <div
          class="
          text-xl
          flex
          justify-center
          gap-x-3
          md:gap-x-8
          md:text-4xl
          "
        >
          <a href="https://www.youtube.com/codeiiest" target="_blank" rel="noreferrer">
            <carbon-logo-youtube class="text-gray-300 hover:text-red-500 transition duration-500 ease-in-out transform" aria-label="CodeIIEST YouTube Channel" />
          </a>
          <a href="https://github.com/CodeIIEST-dev" target="_blank" rel="noreferrer">
            <carbon-logo-github class="text-gray-300 text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-500 ease-in-out" aria-label="CodeIIEST GitHub Org" />
          </a>
          <a href="https://twitter.com/codeiiest" target="_blank" rel="noreferrer">
            <carbon-logo-twitter class="text-gray-300 hover:text-blue-400 transition duration-500 ease-in-out" aria-label="CodeIIEST Twitter" />
          </a>
          <a href="https://www.facebook.com/CodeIIEST" target="_blank" rel="noreferrer">
            <carbon-logo-facebook class="text-gray-300 hover:text-blue-600 transition duration-500 ease-in-out" aria-label="CodeIIEST Facebook Page" />
          </a>
          <a href="mailto:codeiiest.iiest@gmail.com" target="_blank" rel="noreferrer">
            <cib-gmail class="text-gray-300 hover:text-red-600 transition duration-500 ease-in-out" aria-label="Email Us" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>