JSFiddle - React, Tailwind, and code Playground

by gauravsingh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">

<p>Resize the browser window to see the responsive effect.</p>

<div class="row">
  <div class="col-sm-8">
    <h4>Title</h4>
    <p>Resize the browser window to see the responsive effect.</p>
  </div>
  <div class="col-sm-4">
    <button type="button" class="btn btn-primary float-right">Basic</button>
  </div>
</div>


<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="col-md-3">
    <div class="content">
      <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Mountains" >
   
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. </p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" >
    
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. </p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature">
      
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. </p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Mountains">
     
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
    </div>
  </div>
<!-- END GRID -->
</div>


<!-- END MAIN -->
</div>

CSS

img {
  max-width: 100%;
 }