HTML <summary> tag with custom style at PNLdev

Run
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            margin: 50px;
        }

        details {
            display: inline-block;
            text-align: left;
        }

        summary {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px;
            cursor: pointer;
            border-radius: 5px;
            user-select: none;
        }

        details[open] summary {
            background-color: #45a049;
        }

        div {
            background-color: #f1f1f1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>A Example &lt;summary&gt;</h1>
    <details>
        <summary>Show details</summary>
        <div>
            <p>This is a sample text enclosed within a &lt;details&gt; and &lt;summary&gt; tag.  و  </p>
            <p>You can view these details by clicking on "View Details".</p>
        </div>
    </details>
</body>
</html>