JSFiddle - React, Tailwind, and code Playground

by aqeelabbas

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :is() Selector</title>
</head>
<body>
<!-- :is Property Example-->
    <div class="container">
        <h1>Hello, World!</h1>
        <h2>Welcome to CSS</h2>
        <p>This is a paragraph.</p>
        <span>This is not affected by the style.</span>
    </div>
    
    <!-- :where Property Example-->
    <h1>Hello, World!</h1>
    <h2>Welcome to CSS</h2>
    <p>This is a paragraph.</p>
    <span>This text remains unchanged.</span>
    
     <!-- clip-path Property Example with polygon()-->
    <div class="custom-shape"></div>
    
     <!-- clip-path Property Example with circle()-->
    <div class="circle-clip"></div>
    
       <!-- clip-path Property Example with path()-->
    <div class="custom-path-clip"></div>
    
    
     <!-- percepective Property Example with-->
    <div class="cube-container">
        <div class="cube">
            <div class="face front"></div>
            <div class="face back"></div>
            <div class="face top"></div>
            <div class="face bottom"></div>
            <div class="face right"></div>
            <div class="face left"></div>
        </div>
    </div>
    
    <!-- only local videos are allowed inside <video> tag so you can check locally and a captions.vtt file locally -->
    <video controls>
        <source src="video.mp4" type="video/mp4">
        <!-- Add a track for captions -->
        <track kind="captions" src="captions.vtt" srclang="en" label="English Captions">
    </video>
</body>
</html>

CSS

/* Select all h1, h2, and p elements inside .container */
        .container :is(h1, h2, p) {
            color: #007bff;
        }
        
        
        /* Apply styles to all h1, h2, and p elements */
        :where(h1, h2, p) {
            font-weight: bold;
            color: #007bff;
        }
        
        
       /*  clip-path Property Example with polygon()*/
        .custom-shape {
            width: 200px;
            height: 200px;
            background-color: #007bff;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
        
        /*  clip-path Property Example with circle()*/
        .circle-clip {
            width: 200px;
            height: 200px;
            background-color: #007bff;
            clip-path: circle(50% at 50% 50%);
        }
        
        
        /*  clip-path Property Example with ellipse()*/
        .ellipse-clip {
            width: 200px;
            height: 150px;
            background-color: #ff6347;
            clip-path: ellipse(50% 50% at 50% 50%);
        }
        
        
        /*  clip-path Property Example with path()*/
       
        .custom-path-clip {
            width: 200px;
            height: 200px;
            background-color: #00cc66;
            clip-path: path('M100 10 L150 190 L50 190 Z');
        }
        
        
        /*  percpective Property Example */
        .cube-container {
            perspective: 600px;
        }

        .cube {
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            animation: rotate 4s linear infinite;
        }

        .face {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #ff6347;
            border: 1px solid #000;
        }

        .front { transform: translateZ(50px); }
        .back { transform: rotateY(180deg) translateZ(50px); }
        .top { transform: rotateX(90deg) translateZ(50px); }
       ...