JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="img">
	<h2 class="caption">Cool</h2>
</div>

<h3>One</h3>

<p>Some text</p>

<h3>Two</h3>

<p>Some text</p>

<h3>Three</h3>

<p>Some text</p>

<div class="img">
	<h2 class="caption">Cool</h2>
</div>

<h3>one</h3>

<h3>two</h3>

<h3>three</h3>

CSS

body {counter-reset: h2counter;}
h1 {counter-reset: h2counter;}
h3:before {
content: counter(h2counter) ".\0000a0";
counter-increment: h2counter;
color:green;
font-style: italic;
font-size:1.4em;
}

.img {
    height: 240px;
    position:relative;
}

.caption {
    width: 100%;
    background: #191919;
    color: #ffffff;
    font-size: 2em;
    position:absolute;
    bottom:0px;
    margin-bottom:0px;
    line-height:1.2em;
    text-indent:0.2em;
}