JSFiddle - React, Tailwind, and code Playground

by godsnake

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="action">

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem container">
          
                      <div class="row">
	          <div class="col-md-7 ml-md-auto col-xs-12 align-self-center">
          <p class="titleline pt-3 text-secondary font-weight-bold">Discover + Share + Buy + Sell</p>
          <p class="bigsentence">Use our social network to browse or post for FREE, run a membership service for your fans, or sell your digital content to people on and off the platform. &nbsp;</p>
        </div>
 
        <div class="col-md-5">
          <img class="img-fluid d-block w-100 img-thumbnail" src="https://pingendo.github.io/templates/sections/assets/gallery_9.jpg"> </div>
      </div>
      
          
          
          
                    <div class="row ">
                      
                              <div class="col-md-5">
          <img class="img-fluid d-block w-100 img-thumbnail" src="https://pingendo.github.io/templates/sections/assets/gallery_9.jpg"> </div>
                      

       
          
	          <div class="col-md-7 ml-md-auto col-xs-12 align-self-center">
          <p...

CSS

html, body {
  height: 100%;
}

.action {min-height:600px; height:100%;}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%; width:100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 100%;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}