JSFiddle - React, Tailwind, and code Playground

by Mikel

HTML

<div class="pack-hover-video">
	<a href="" class="fleet-hover-video" id="fleet-hover-video-1">	
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod lorem. Lorem ipsum dolor sit amet, consetetur sadipscing
										
	</a>

	<a href="" class="fleet-hover-video" id="fleet-hover-video-2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod lorem. Lorem ipsum dolor sit amet, consetetur adipscing
	</a>

	<a href="" class="fleet-hover-video" id="fleet-hover-video-3">	
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod lorem. Lorem ipsum dolor sit amet, consetetur sadipscing
	</a>
	<a href="" class="fleet-hover-video" id="fleet-hover-video-4">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod lorem. Lorem ipsum dolor sit amet, consetetur sadipscing
	</a>
</div>

CSS

.pack-hover-video {
	position: absolute;
 	bottom: 40px;
	left: 40px;
}
	

      .fleet-hover-video {
        display: inline-block;
        vertical-align: bottom;
        width: 100px;
        height: 50px;
        margin-right: 45px;
        background-color: black;
        border-radius: 10px;
        opacity: 0.7;
        text-align: center;
        padding: 30px 20px 0 20px;
        overflow: hidden;
        text-decoration: none;
        color: #fff;
        transition: 1s ease;
}

        .fleet-hover-video:hover {
            background-color: red;
            height: 100px;
            
        }