JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<div class="item">
										<div id="movie-iframe">
									        <div class="movie_thumbs_big">
									            									                <div id="player"></div>
									                									        </div>
									    </div>
										<div class="video">
											<!-- <p>video content</p> -->
											<div class="myIframe"> 
											   	<iframe src="http://www.youtube.com/embed/kLGaoYbR7LA?rel=0" frameborder="0">
									        	</iframe>
											</div>
											<!-- <a href="https://www.youtube.com/watch?v=kLGaoYbR7LA">


												<img src="https://img.youtube.com/vi/kLGaoYbR7LA/mqdefault.jpg" />
											</a> -->
										</div> 
										<div class="detail">
											<a href="http://local.bgmer.front/musics/test-copy-5/">
												<h5></h5>
												<h3>
												► test  Copy												</h3>
												<p class="description">
													<img alt="tag" src="http://local.bgmer.front/wp-content/themes/twentytwentyone-child/assets/images/[email protected]">
													cxxx, test music												</p>
												<p class="downloads">
													<span class="numberOfDownload">102</span><span>DL</span>
												</p>
											</a>
										</div>
										<div class="download clearfix">
											<a href="http://local.bgmer.front/wp-content/uploads/2021/04/FullSizeRender.mov" download="" data-file="http://local.bgmer.front/wp-content/uploads/2021/04/FullSizeRender.mov" data-post_id="96" data-type="short" class="download short long-video" id="short-video"><span class="download-icon"></span>SHORT <small>00:00:20</small></a>
											<a href="http://local.bgmer.front/wp-content/uploads/2021/04/FullSizeRender.mov" download="" data-file="http://local.bgmer.front/wp-content/uploads/2021/04/FullSizeRender.mov" data-post_id="96" data-type="long" class="download long long-video" id="long-video"><span class="download-icon"></span>LONG <small>00:19</small></a>
										</div>
									</div>

SASS

.items {
        display: block;
        width: 99.7%;
        padding: 30px 2px 20px;
		
        .item {
            display: block;
            float: left;
            width: 29.9%;
            margin-right: 5.1%;
            margin-bottom: 3.3%;
			
            &:nth-child(3n+3) {
                margin-right: 0;
            }
            .video {
                background: #ccc;
                height: 210px;
                border: 1.5px solid black;
                box-sizing: border-box;
			
                p {
                    margin: 0;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            .detail {
                a {
                    text-decoration: none;
					          h5 {
                        color: #595757;
                        margin: 0;
                        padding: 7px 0 0px;
                        font-size: 14px;
                        font-weight: normal;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: normal;
                        letter-spacing: normal;
					
                    }
                    h3 {
                        margin: 0;
                        font-size: 20px;
                        font-weight: bold;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: normal;
                        letter-spacing: normal;
                        color: #231815;
                        position: relative;
					    transition: all .15s ease;
					    display: inline-block;
					

						&::before {
						    content: "";
						    position: absolute;
						    width: 100%;
						    height: 2px;
						    bottom: 0;
						    left: 0;
						    background-color: #231815;
						    visibility: hidden;
						   ...