JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
</head>

<body>
    <header>
        <nav>
            Header
        </nav>
    </header>
        <main>
            <div class="narrow-container">
                <div>
                    <p class="font-bold">Some Question</p>
                    <p class="italic">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, vestibulum
                        mi nec, ultricies metus. Integer sit amet semper turpis. Nulla nec purus feugiat, vestibulum
                        mi nec, ultricies metus. Integer sit amet semper turpis.
                    </p>
                    <div class="button-group" role="group">
                        <label class="radio-button-group">
                            <input class="sr-only" type="radio" value="1">
                            <span>Disappointing</span>
                        </label>
                        <label class="radio-button-group">
                            <input class="sr-only" type="radio" value="2">
                            <span>Under Expectations</span>
                        </label>
                        <label class="radio-button-group">
                            <input class="sr-only" type="radio" value="3">
                            <span>As Expected</span>
                        </label>
                        <label class="radio-button-group">
                            <input class="sr-only" type="radio" value="4">
                            <span>Above Expectations</span>
                        </label>
                        <label class="radio-button-group">
                            <input class="sr-only" type="radio" value="5">
                            <span>Exceptional!</span>
                        </label>
                    </div>
                </div>
                <div>
                    <p class="font-bold">Some Question</p>
           ...

CSS

*,
::before,
::after {
    box-sizing: border-box; /* 1 */
    border-width: 0; /* 2 */
    border-style: solid; /* 2 */
    border-color: #e4e4e7; /* 2 */
}

html {
    line-height: 1.5;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

nav {
    color: white;
    background-color: black;
    width: 100%;
    padding: 1rem;
}

body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

main {
    display: flex;
    flex: 1;
    padding: 1rem;
    overflow: auto;
    background-color: #f3f4f6;
    gap: 0.5rem;
}

.narrow-container {
    max-width: 32rem;
    margin: auto;
}

.font-bold {
    font-weight: 700;
}

.italic {
    font-style: italic;
}

.button-group {
    display: inline-flex;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    box-shadow: black;
}

.radio-button-group {
    display: flex;
    background-color: white;
    text-align: center;
    padding: 1rem;
    border-width: 1px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-weight: 500;
    font-size: 0.75rem;
}

.radio-button-group:hover {
    background-color: lightgrey;
}

.radio-button-group:focus-within{
    color: red;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}