JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tam Ekran Div Örneği</title>
<style>
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        background-color:red
    }
    #container {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #f0f0f0;
    }
    #fullScreenDiv {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        transition: all 0.5s ease;
    }
    #buttonContainer {
        position: absolute;
        top: 20px;
        left: 20px;
    }
    .button {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: #cccccc;
        border-radius: 50%;
        margin-right: 10px;
        cursor: pointer;
    }
    .icon {
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
    <div id="container">
        <div id="buttonContainer">
            <div class="button" id="phoneButton" onclick="resizeDiv('phone')"> 
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.84v-1.68c0-4.04-3.18-7.32-7.14-7.32h-2.1c-3.96 0-7.14 3.28-7.14 7.32v1.68H3v7.2h18v-7.2h-1.02z"></path></svg>
            </div>
            <div class="button" id="tabletButton" onclick="resizeDiv('tablet')"> 
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
            </div>
            <div class="button" id="monitorButton" onclick="resizeDiv('monitor')"> 
                <svg...