JSFiddle - React, Tailwind, and code Playground

by shimmy

HTML

<main> 
    <div class="page-column left-column">
      <header class="jumbotron">The perfect gift for everyone</header>
    </div>

    <div class="page-column main-content">

<footer class="contact-details">
        <div class="detail phone">
          <a href="tel:+1234">1234</a>
        </div>

        <div class="detail email">
          <a href="mailto:[email protected]">[email protected]</a>
        </div>

        <br>

        <div class="detail address">
          <a href="https://goo.gl/maps">
            Jupiter
          </a>
        </div>
      </footer>
    </div>


  </main>

SCSS

main {
  margin: auto;
  width: $page-width;

  .page-column {
    height: $page-height;
    float: left;
  }

  .left-column {
    width: $left-column-width;
    background-color: $color-black;
    padding: 0 25px;

    .logo {
      margin: 25px auto;
      width: 200px;
      height: 150px;
      background-image: url("images/logo.png");
    }

    .jumbotron {
      background-color: $color-black;
      color: $color-white;
      font-size: 48px;
      font-weight: bold;
      overflow: overlay;
      width: 400px;
      padding: 25px 0;
      border-radius: 25px;
      margin: 30px 0;
    }

    .about-us {
      .about-us-title {
        color: $color-turquoise;
      }

      .about-us-text {
        color: $color-white;
      }
    }
  }

  .main-content {
    background-color: $color-cyan;
    width: $right-column-width;
    position: relative; //required for footer

    .banner {
      $banner-padding: 30px;
      $banner-corner-radius: 25px;
      height: 450px;
      background-color: $color-white;
      width: $right-column-width -$banner-padding;
      margin: ($banner-padding * 2) 0 $banner-padding $banner-padding;

      border-radius: $banner-corner-radius 0 0 $banner-corner-radius;
    }

    .featured-items {}

    .contact-details {
      position: absolute;
      bottom: 0;
      padding: 10px;
      text-align: center;
      width: 100%;

      a,
      a:hover,
      a:visited,
      a:link,
      a:active {
        color: black;
        text-decoration: none;
      }

      .detail {
        display: inline;

        span {}

        @mixin icon($name) {
          &::before {
            content: "";
            display: inline-block;
            background-image: url("images/#{$name}.svg");
            background-size: 12px;
            background-position-y: 14px;
            background-position-x: 13px;
            background-repeat: no-repeat;
            width: 25px;
            height: 30px;
          }
        }

        &.address...