JSFiddle - React, Tailwind, and code Playground

by abdollahpor

HTML

<html>
<head>
    <meta charset="utf-8">    
</head>

<body>
  <div id="wrapper">
    <div id="myDiv1" class="mydiv"></div>
    <div id="myDiv2" class="mydiv"></div>
    <div id="myDiv3" class="mydiv"></div>
  </div>
</body>
</html>

CSS

body {
  background: #EEE;
  font-family: arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
}

.mydiv {
  margin: 60px auto;
  width: 400px;
  height: 400px;
  background-color: #ff9900;
}
#myDiv1 {
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, from(#0099ff), to(#000));
  background-image: -moz-linear-gradient(0% 100% 0deg, #0099ff, #000);
}

#myDiv2 {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#0099ff), to(#000));
  background-image: -moz-linear-gradient(0% 100% 90deg, #000, #0099ff);
}

#myDiv3 {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#ff9900), to(#000));
  background-image: -moz-linear-gradient(0% 100% 90deg, #000, #ff9900);
}