JSFiddle - React, Tailwind, and code Playground

by artur_arseniev

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.13/css/grapes.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.13/grapes.min.js"></script>
    <script src="https://unpkg.com/[email protected]"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <main>
        <div id="gjs"></div>
    </main>
    <script>
        const htmlContent = `
           <style>
    .banner {
        height: 480px;
        color: #ffffff;
    }
    
    .banner__container {
        padding-top: 6%;
        padding-left: 15%;
        padding-bottom: 10%;
    }
    
    .banner__headline {
        font-family: Figtree;
    }
    
    @media (max-width:767px) {
        .banner {
            height: 350px;
        }
        .banner__container {
            padding-left: 5%;
        }
    }
    
    @media (max-width:480px) {
        .banner {
            height: 250px;
        }
    }
    </style>
    <section class="banner attribute" style="background-image: linear-gradient(#023f8080, #023f8080), url(https://images.pexels.com/photos/27308359/pexels-photo-27308359/free-photo-of-pigeons-on-a-tree.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); background-position: top left; background-size: cover; background-repeat: no-repeat;">
        <div...