JSFiddle - React, Tailwind, and code Playground

by EikHunter

HTML

<div class="pg-LandingHero">
    <div class="pg-LandingHero_Inner">
      <header class="pg-LandingHero_Header">
        <p class="pg-LandingHero_Kicker">This is kicker text</p>
        <h1 class="pg-LandingHero_Title">This is an image title</h1>
      </header>
      <div class="pg-LandingHero_Body">
        <div class="pg-LandingHero_Columns">
          <div class="pg-LandingHero_Column pg-LandingHero_Column-content">
            <p class="pg-LandingHero_Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia.</p>
            <a href="{{ pages.current.content.hero_link }}" class="pg-LandingHero_Link">This is a link</a>
          </div>
          <div class="pg-LandingHero_Column pg-LandingHero_Column-image">
            <div class="pg-LandingHero_Item">
              <div class="pg-LandingHero_ImageContainer">
                <div class="pg-LandingHero_Image">
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

/*
|--------------------------------------------------------------------------
| Landing Hero
|--------------------------------------------------------------------------
| @namespace: pg-
|
*/
.pg-LandingHero {
  padding-top: 80px;
  padding-bottom: 80px;

  background-color: var(--Color_Blue-dark);
}

.pg-LandingHero_Inner {
  max-width: 2900px;
  margin 0 auto;
  padding-right: 20px;
  padding-left: 20px;
}

/*
|--------------------------------------------------------------------------
| Columns
|--------------------------------------------------------------------------
|
*/
.pg-LandingHero_Columns {
  display: flex;
}

.pg-LandingHero_Column {
  position: relative;

  flex: 1;
}

.pg-LandingHero_Column-content {
  flex: 0.44;

  margin-right: 80px;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
|
*/
.pg-LandingHero_Header {
  width: calc(percentage(3, 4));
  margin-bottom: 80px;
}

.pg-LandingHero_Kicker {
  @apply --Font-14;

  margin-bottom: 7px;

  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;

  color: var(--Color_Aqua);
}

.pg-LandingHero_Title {
  @include Font_48;

  font-weight: 500;

  color: #333;

  @media (--lg) {
    line-height: 68px;
  }
}

/*
|--------------------------------------------------------------------------
| Body
|--------------------------------------------------------------------------
|
*/
.pg-LandingHero_Text {
  margin-bottom: 2vr;

  color: #333;
  opacity: 0.76;
}

.pg-LandingHero_Link {
  @apply --Font-14;

  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;

  color: #333;
}

/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
|
*/
.pg-LandingHero_Item {
  position: absolute;
  right: -23%;
  left: 0;

  max-width: 1005px;
}

.pg-LandingHero_Image {
 ...