JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<section class="SliderBG">   
	<div class="SLIDER">
		<div class="slide">
			<img src="Slider/1(x1).jpg" alt="Картинка слайда 1">
			<div class="slideText">
				<span class="slideName">BMW X1</span>
				<span class="slidePrice">От 1 980 000 Р</span>
			</div>
		</div>
	</div>
</section>

CSS

.SliderBG {
    background-color: #e1e1e1;
    border: 1px solid #e1e1e1;
}
 
.SLIDER {
    border: 6px solid black;
    width: 1470px;
    margin: 20px auto;
    box-sizing: border-box;
}
 
.slide {
    position: relative;
}
 
.slideText {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    font-family: Verdana;
    color: rgba(255, 255, 255, 0.8);
}
 
.slidePrice {
    float: right;
    letter-spacing: 2px;
}