JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>work 3</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body {
            background:url(bg.png) repeat 0 0;
            font: 14px/16px Arial, Tahoma, Verdana, sans-serif;
            padding:20px;
        }
        .out {
            border:2px solid #104531;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
            border-radius:10px;
            overflow:hidden;
        }
        .oib {
            background: -moz-linear-gradient(top, rgba(84,155,68,0.75) 0%, rgba(44,94,38,0.75) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(84,155,68,0.75)), color-stop(100%,rgba(44,94,38,0.75)));
            background: -webkit-linear-gradient(top, rgba(84,155,68,0.75) 0%,rgba(44,94,38,0.75) 100%);
            background: -o-linear-gradient(top, rgba(84,155,68,0.75) 0%,rgba(44,94,38,0.75) 100%);
            background: -ms-linear-gradient(top, rgba(84,155,68,0.75) 0%,rgba(44,94,38,0.75) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf549b44', endColorstr='#bf2c5e26',GradientType=0 );
            background: linear-gradient(top, rgba(84,155,68,0.75) 0%,rgba(44,94,38,0.75) 100%);
            padding:10px;
        }
        .in {
            border:1px solid #000;
            margin:0;
            padding:0;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
            border-radius: 10px;
            overflow:hidden;
            
        }
        .top {
            background: #f4e400;
            background: -moz-linear-gradient(top, #f4e400 0%, #d88200 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4e400), color-stop(100%,#d88200));
    ...

CSS

* {
            margin:0;
            padding:0;
        }
        body {
            background:url(bg.png) repeat 0 0;
            font: 14px/16px Arial, Tahoma, Verdana, sans-serif;
            padding:20px;
        }
        .out {
            border:2px solid #104531;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
            border-radius:10px;
            overflow:hidden;
        }
        .oib {
            background: -moz-linear-gradient(top, rgba(84,155,68,0.75) 0%, rgba(44,94,38,0.75) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(84,155,68,0.75)), color-stop(100%,rgba(44,94,38,0.75)));
            background: -webkit-linear-gradient(top, rgba(84,155,68,0.75) 0%,rgba(44,94,38,0.75) 100%);
            background: -o-linear-gradient(top, rgba(84,155,68,0.75) 0%,rgba(44,94,38,0.75) 100%);
            background: -ms-linear-gradient(top, rgba(84,155,68,0.75) 0%,rgba(44,94,38,0.75) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf549b44', endColorstr='#bf2c5e26',GradientType=0 );
            background: linear-gradient(top, rgba(84,155,68,0.75) 0%,rgba(44,94,38,0.75) 100%);
            padding:10px;
        }
        .in {
            border:1px solid #000;
            margin:0;
            padding:0;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
            border-radius: 10px;
            overflow:hidden;
            
        }
        .top {
            background: #f4e400;
            background: -moz-linear-gradient(top, #f4e400 0%, #d88200 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4e400), color-stop(100%,#d88200));
            background: -webkit-linear-gradient(top, #f4e400 0%,#d88200 100%);
            background: -o-linear-gradient(top, #f4e400 0%,#d88200 100%);
         ...