JSFiddle - React, Tailwind, and code Playground
HTML
<div id="alert">
Text goes here!
<div class="lines"></div>
</div>
CSS
body {
margin:50px;
}
#alert {
position:relative;
padding:10px;
box-shadow:0px 1px 1px #000, 0px 1px 1px #F5BFB1 inset;
background: #ea765a; /* Old browsers */
background: -moz-linear-gradient(top, #ea765a 0%, #d2583b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea765a), color-stop(100%,#d2583b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* IE10+ */
background: linear-gradient(to bottom, #ea765a 0%,#d2583b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea765a', endColorstr='#d2583b',GradientType=0 ); /* IE6-9 */
}
.lines {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background:url(http://i.imgur.com/oIuK2.png);
opacity:0.05;
}