JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carousel">
    <div class="carousel-wrapp">
        <div class="element">
               element-1
       </div>
        <div class="element">element-2</div>
        <div class="element">element-3</div>
        <div class="element">element-4</div>
        <div class="element">element-5</div>
        <div class="element">element-6</div>
    </div>
</div>

CSS

.carousel {
    width: 700px;
    height: 200px;
    overflow: hidden;
}

.carousel-wrapp {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
}

.element {
    width: 200px;
    height: 200px;
    float: left;
    background: #000;
    color: #fff;
    margin: 0 10px 0 0;
    text-align: center;
}

.element:hover {
    height: 400px;
    background: #cc0000;
}