JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<!--- USSCCDEV-->

<aura:component implements="forceCommunity:themeLayout" access="global">
  <aura:attribute name="login" type="Aura.Component[]" required="false" />
  <aura:attribute name="middlecontent" type="Aura.Component[]" required="false" />
  <aura:attribute name="bannercontent" type="Aura.Component[]" required="false" />
  <aura:attribute name="brandtherapy" type="Aura.Component[]" required="false" />
  <aura:attribute name="footer" type="Aura.Component[]" required="false" />
  <aura:attribute name="next" type="String" required="false" default="1" />
  <aura:attribute name="current" type="String" required="false" default="0" />
  <aura:attribute name="interval" type="String" required="false" default="15000" />
  <aura:attribute name="fadeTime" type="String" required="false" default="800" />
  <aura:attribute name="imgNum" type="String" required="false" default="3" />



  <ltng:require scripts="{!join(',',$Resource.Biogen_Pass_Portal + '/js/jquery.min.js', $Resource.Biogen_Pass_Portal + '/js/bootstrap.min.js')}" afterScriptsLoaded="{!c.myAction}" />

  <ltng:require styles="{!$Resource.Biogen_Pass_Portal + '/css/Login-componnet-internal.css'}" />


  <div class="slds-container--center slds-container--x-large position-rltv">
    <div class="slds-grid slds-wrap">
      <div class="slds-size_12-of-12" id="fadeImg">
        <img src="{!$Resource.Biogen_Pass_Portal + '/img/Hero_image_1.jpg'}" />
        <img style="display:none;" src="{!$Resource.Biogen_Pass_Portal + '/img/Hero_image_2.jpg'}" />
        <img style="display:none;" src="{!$Resource.Biogen_Pass_Portal + '/img/Hero_image_3.jpg'}" />
      </div>
    </div>

    <div class="slds-grid slds-wrap" id="bannerCont">
      <div class="slds-col slds-size_1-of-1">
        <div class="slds-col slds-size_1-of-1 slds-medium-size_5-of-12 logoWrap">
          <img src="{!$Resource.Biogen_Pass_Portal + '/img/[email protected]'}" alt="Logo" />
        </div>
      </div>

      <div class="slds-col...

CSS

.cACN_loginLayout #fadeImg {
  width: 100%;
  height: 650px;
  position: relative;
  z-index: 100;
}

.cACN_loginLayout .position-rltv {
  position: relative;
  height: auto;
  background: #2573ba;
}

div#bannerCont {
  position: relative;
  margin-top: -650px;
  left: 0;
  z-index: 200;
  min-height: 650px;
}

.logoWrap {
  text-align: center;
  float: right;
}

.logoWrap img {
  max-width: 300px;
  margin-top: 50px;
}

.introTextBlock {
  margin-top: 280px;
  padding-left: 50px;
}

.introTextBlock .slds-text-heading_large {
  color: #fff;
  font-size: 60px;
  font-weight: 500;
  font-family: Roboto;
}

.introTextBlock .slds-text-body_regular {
  color: #fff;
  font-size: 24px;
  font-family: Roboto;
}

.loginFormBlock .cBIIB_LoginComponent {
  float: right;
}

.loginFormBlock {
  padding-right: 50px;
  margin-bottom: 30px;
}

/* media queries */

@media only screen and (max-width: 767px) {
  .logoWrap {
    text-align: right;
  }
  .logoWrap img {
    max-width: 160px;
  }
  .introTextBlock {
    padding: 40px 50px;
    margin-top: 100px;
  }
  .introTextBlock .slds-text-heading_large {
    font-size: 26px;
  }
  .introTextBlock .slds-text-body_regular {
    font-size: 18px;
  }
  .loginFormBlock {
    padding: 0 20px;
  }
}