JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="col-md-3 float-left" >
  <div class="card" >
    <img class="card-img-top"  src="https://static.pexels.com/photos/46216/sunflower-flowers-bright-yellow-46216.jpeg" data-holder-rendered="true" >
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This isnger.</p>
      <button type="button" class="btn btn-dark btn-sm">Devamı için tıklayın <span class="badge badge-danger">New!</span></button>
    </div>
  </div>
  </div>
  
  <div class="col-md-3 float-left">
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" src="https://galeri3.uludagsozluk.com/139/kucuk-kurbaga_189342.jpg" >
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    </div></div>
    
    
<div class="col-md-3 float-left">
  <div class="card">
    <img class="card-img-top"  src="https://static.pexels.com/photos/46216/sunflower-flowers-bright-yellow-46216.jpeg" data-holder-rendered="true" >
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This isnger.</p>
    </div>
  </div>
  </div>
  
  <div class="col-md-3 float-left">
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" src="https://galeri3.uludagsozluk.com/139/kucuk-kurbaga_189342.jpg" >
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    </div></div>
   
   
 ...

CSS

@import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

 body{ font-family: 'Muli', sans-serif; color:black;  outline:none;}

input, select, button { outline:none !important;}

//.card-title{ margin-top: 18px;}
.card { height:400px}
.card-block{ padding:14px;}
.card img{height: 220px; width: 100%; display: block;}