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="tasiyici">
<div class="mx-auto col-lg-12 col-md-10 bg-danger p-1">
asdasdasd
asdasd
asdasd
asd
</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
 body{ font-family: 'Muli', sans-serif; color:black;}
 
 .tasiyici{ width:992px; height:200px; background-color:red; margin:0px auto;}
 
 @media screen and (max-width: 993px) and (min-width: 480px)
 { 
  .tasiyici{ width:90%; background-color:yellow;}
 
 }