JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div class="outer-wrap">
    <ul class="asset-blocks">
        <li class="image">
          <div class="blank-block"></div>
          <div class="overlay">
              <h1>Utah Olympic Park</h1>
              <h4>Located in cool, beautiful Park City, Utah and cradled by the Wasatch Mountains, the 398-acre Utah Olympic park venue is open year-round to visitors.</h4>
          </div>
        </li>
    </ul>
    <ul class="asset-blocks">
        <li class="image">
          <div class="images">
            <img src="http://www.placekitten.com/350/400/">
          </div>
        </li>
    </ul>
    <ul class="asset-blocks">
        <li class="text lt-gray">
            <p>Praesent nec sem eu augue consectetur congue non fringilla nunc. Proin placerat leo quis ultricies mattis. In hac habitasse platea dictumst. Duis dictum elementum dictum. Nunc sagittis justo nec elit gravida blandit.</p>
            <p>Aenean scelerisque risus mauris. Integer id imperdiet felis. Mauris elementum maximus diam, nec imperdiet enim feugiat ut. Nam placerat laoreet mi in venenatis. Vestibulum vel mattis orci. Fusce non iaculis mauris. Nam vel iaculis lorem.</p>
        </li>
        <li class="text med-gray">
            <p>Praesent nec sem eu augue consectetur congue non fringilla nunc. Proin placerat leo quis ultricies mattis. In hac habitasse platea dictumst. Duis <span class="orange">dictum elementum dictum</span>. Nunc sagittis justo nec elit gravida blandit.</p>
            <p>Aenean scelerisque risus mauris. Integer id imperdiet felis. Mauris <span class="orange">elementum maximus diam</span>, nec imperdiet enim feugiat ut. Nam placerat laoreet mi in venenatis. Vestibulum vel mattis orci. Fusce non iaculis mauris. Nam vel iaculis lorem.</p>
        </li>
    </ul>
    <ul class="asset-blocks">
        <li class="image">
            <div class="images">
                <img src="http://www.placekitten.com/g/340/500/">
            </div>
        </li>
        <li class="text...

CSS

.outer-wrap { /* for iPhone 4s dimensions */
    width: 320px;
    margin-top: -212px; /* hides the block that pushes the overlay over the first image */
}

.asset-blocks {
    list-style-type: none;
    display: block; /* only necessary in jsfiddle to give the <ul> its default property */
    margin: 0; /* removes space that shows up in jsfiddle only */
    padding: 0; /* removes space that shows up in jsfiddle only */
}

.image {
    width: 100%;
	height: 200px;
    margin-bottom: 6px;
    padding: 0; /* removes space that shows up in jsfiddle only */
}

.blank-block {
    height: inherit;
    margin-bottom: inherit;
    background: rgba(0,0,0,.5);
}

.overlay {
    position: relative;
    height: inherit;
    background: rgba(0,0,0,.6);
    z-index: 5;
    color: rgba(240,240,240,1);
}

h1 {
    text-shadow: 2px 2px #000;
    margin: 0; /* Appears to be a jsfiddle bug */
    padding: 24px 0 0px 24px;
}

h4 {
    padding: 0 24px;
}

.images {
    position: relative;
    width: 100%;
    height: inherit;
    overflow: hidden; /* keeps images bound by parent element*/
    z-index: 4;
}

.text {
    color: black;
    position: relative;
    font-size: 12px;
    margin-bottom: 6px;
    padding: 10px 18px;
}

.lt-gray {
    background: #f8f4f4;
}

.med-gray {
    background: #dedbdb;
}

.green {
    background: #85c041;
}

.orange {
    color: #f5973a;
}