JSFiddle - React, Tailwind, and code Playground

by Max Sinev

HTML

<div class="fullimage_wrapper"> 
    		<img src="img/test_pic.png">
    		<div class="fullimage_caption">Сьешь ещё этих мягких французских булок, да выпей чаю.</div>
    		<a class="gallery_arrow left arrow_for_fullimage"> </a>
    		<a class="gallery_arrow right arrow_for_fullimage"> </a>
</div>

CSS

.gallery_arrow.right.arrow_for_fullimage
{
    right: 20px;
    bottom: 10px;
}

.gallery_arrow.left.arrow_for_fullimage
{
    left: 20px;
    bottom: 10px;
}

.fullimage_wrapper
{
    display: inline-block; 
    padding: 20px; 
    background: url(../img/bgWindow.png); 
    text-align: center; 
    border-radius: 25px; 
    border: 2px solid #fbbc47; 
    font: 13px Georgia; 
    color:#fbbc47; 
    text-shadow: 0 1px 0 #000;  
    position: absolute; 
    top: 100px; 
    left: 30%; 
    z-index: 1000;
}


.fullimage_wrapper:before
{
    content: '';
    width: 315px; 
    height: 33px; 
    background: url(../img/arrowBottom.png); 
    position: absolute; 
    bottom: -33px; 
    left: 50%; 
    margin-left: -157px;
}

.fullimage_caption
{
    margin: 20px auto 0 auto;
}