JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
    <div class="flagBar red">Here is some Text</div>
    <div class="flagBar green">
         <h2>Here is </h2>

         <h3>Bigger Text</h3>

    </div>
    <div class="flagBar blue">Wow I can really write
        <br/>a lot of text</div>
</div>
</div>

CSS

.container {
    overflow:hidden;
    padding: 50px 50px 50px 0;
    background:#000 url('http://walls4joy.com/thumbs/anime-manga/black-and-white-minimalistic-pattern-2580-480x320.png') no-repeat;
}
.flagBar {
    width: 250px;
    margin: 0 0 20px -20px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    overflow:hidden;
    position:relative;
    color:#fff;
    padding:4px 0 4px 50px;
    text-shadow:1px 1px 0px #000;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.red {
    background: rgba(249, 161, 0, 0.7);
}
.blue {
    background: rgba(60, 60, 152, 0.7);
}
.green {
    background: rgba(44, 199, 0, 0.7);
}