JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <title>Rhombus</title>
        <style>

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                font-family: sans-serif;
            }

            .rhombus {
                width: 640px;
                height: 640px;
                outline: 4px solid black;
                transform: scale(0.7) rotate(-45deg);
                margin: 40px 0;
                overflow: hidden;
            }

            .rhombus .inner {
                width: 100%;
                height: 100%;
                transform: scale(1.42) rotate(45deg);
            }

            .rhombus .inner .left {
                width: 50%;
                height: 100%;
                float: left;
                shape-outside: polygon(0 0, 105% 0, 5% 50%, 105% 100%, 0 100%);
            }

            .rhombus .inner .right {
                width: 50%;
                height: 100%;
                float: right;
                shape-outside: polygon(-5% 0, 100% 0, 100% 100%, -5% 100%, 95% 50%);
            }

            .rhombus .content {
                text-align: center;
                font-size: 36pt;
            }

            .rhombus .content span {
                outline: 2px dotted blue;
            }

            @media (max-width: 600px) {

                .rhombus {
                    width: 360px;
                    height: 360px;
                }

            }

        </style>
    </head>
    <body>

        <div class="rhombus">
            <div class="inner">
                <div class="left"></div><div class="right"></div>
                <div class="content">
                    <span></span>
                </div>
            </div>
        </div>

   ...