JSFiddle - React, Tailwind, and code Playground

by mahdiar_mansouri

HTML

<style>
    div{
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
    }
    img{
        width: 50px;
        margin-right: 20px;
        margin-left: 20px;
        margin-top: 50px;
        height: 50px;        
    }
    .box{
        flex-direction: column;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 150px;
        align-items:center;
    }    
    .copy{
        background: #333;
        color: #ddd;
        padding:10px;
        margin-top:10px;
        margin-bottom:10px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
<div>
<h1>Solid</h1>
<div>
    <?php
      $brands = scandir("./brands");
      $regular = scandir("./regular");
      $solid = scandir("./solid");
        for($i = 2 ; $i < count($solid) ; $i++){
            $src = $solid[$i];
            echo "<div class='box'>";
                echo "<img loading='lazy' src='solid/$src' />";
                echo "<span class='copy'>$src</span>";
                echo "<span>[Solid]</span>";
            echo "</div>";
        }
    ?>
</div>
<h1>Brand</h1>
    <?php
      

        for($i = 2 ; $i < count($brands) ; $i++){
            $src = $brands[$i];
            echo "<div class='box'>";
                echo "<img loading='lazy' src='brands/$src' />";
                echo "<span>$src</span>";
                echo "<span>[Brand]</span>";
            echo "</div>";
        }
    ?>
</div>
<h1>Regular</h1>
<div>
    <?php
        for($i = 2 ; $i < count($regular) ; $i++){
            $src = $regular[$i];
            echo "<div class='box'>";
                echo "<img loading='lazy' src='regular/$src' />";
                echo "<span>$src</span>";
                echo "<span>[Regular]</span>";
            echo "</div>";
        }
    ?>
</div>
<script>
    document.querySelectorAll(".copy").forEach( item => {
        item.addEventListener("click" , function(){
            if(navigator.clipboard){
               ...