JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<a href="/works/sbi-bank" data-ajax="/works/sbi-bank?ajax">
	                            <div class="works__item-image">
	                                <img src="/uploads/thumbs/001-48755cc319-f5f8cba0c373c97e98181458892ef024.png" class="show">
		                        		                        	<img src="/uploads/thumbs/002-61898e4dfa-f5f8cba0c373c97e98181458892ef024.png">
		                        		                        		                        	<img src="/uploads/thumbs/003-1724b4f66a-f5f8cba0c373c97e98181458892ef024.png">
		                        		                        		                        	<img src="/uploads/thumbs/004-e146920762-f5f8cba0c373c97e98181458892ef024.png">
		                        		                        	                            </div>
	                            <div class="works__item-info">
	                                <div class="works__item-text gradient">Проектирование и концепты веб-сайта для SBI Bank</div>
	                                <div class="works__item-tags">
		                            		                                <span>UX/UI</span><span>Product Development</span>
		                            	                                </div>
	                                <div class="works__item-more">
		                                подробнее о кейсе
	                                    <div class="works__item-arrow">
	                                        <svg class="icon__arrow" width="41px" height="8px">
	                                            <use xlink:href="#arrow"></use>
	                                        </svg>
	                                    </div>
	                                </div>
	                            </div>
	                        </a>

CSS

.text, .gradient2, .gradient3, .gradientWhite {
    background-image: -webkit-gradient(linear,right top,left top,from(#000),color-stop(49.99%,#000),color-stop(50%,#ff6565),to(#ed1c80)); 
    background-image: -webkit-linear-gradient(right,#000 0%,#000 49.99%,#ff6565 50%,#ed1c80 100%); 
    background-image: linear-gradient(-90deg,#000 0%,#000 49.99%,#ff6565 50%,#ed1c80 100%);
    background-size: 200%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.works__item-text {
    -webkit-transition: all 333ms cubic-bezier(.47,0,.745,.715);
    transition: all 333ms cubic-bezier(.47,0,.745,.715);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.35em;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    background-position: 100%;
}
.anim[data-aos].aos-animate, .aos-animate .anim[data-aos], .aos-animate[data-aos] .anim {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
}
.works__item a {
    -webkit-transition: -webkit-transform .175s ease-in;
    transition: transform .175s ease-in;
    transition: transform .175s ease-in,-webkit-transform .175s ease-in;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #231723;
}
.works__item-image {
    width: 76rem;
    height: 26rem;
    margin-right: 4rem;
    position: relative;
}
.works__item-info {
    width: 33rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


.works__item-text {
    -webkit-transition: all 333ms cubic-bezier(.47,0,.745,.715);
    transition: all 333ms cubic-bezier(.47,0,.745,.715);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.35em;
    letter-spacing: -.02em;
   ...