JSFiddle - React, Tailwind, and code Playground

by Sorcy

HTML

<figure class="imageBoxShadow">
    <img alt="Alt-Text" src="http://lorempixel.com/280/375">
    <figcaption>A Caption for this image</figcaption>
</figure>

<figure class="imageBoxShadow">
    <img alt="Alt-Text" src="http://lorempixel.com/100/150">
    <figcaption>A Caption for this image. But the caption is so big it makes the border too wide.</figcaption>
</figure>

<figure class="imageBoxShadow" style="width: 100px">
    <img alt="Alt-Text" src="http://lorempixel.com/100/150">
    <figcaption>Using a hardcoded style to restrict the figure element works but feels stupid.</figcaption>
</figure>

CSS

.imageBoxShadow {
    background-color: #fff;
    box-shadow:       0 0 5px #999999;
    border:           1px solid #CCCCCC;
    float:            left;
}

figure.imageBoxShadow {
    padding: 5px;
}

figure.imageBoxShadow img {
    margin: 0;
}

img.imageBoxShadow {
    margin:  1px 10px 10px 0;
    padding: 5px;
}