<!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="css/style.css">
</head>
<body>
    <form method="post" action="php/comments.php" class="create-comment__form">
        <div class="create-comment__body">
            <div class="create-comment__item">
                <input type="text" placeholder="Имя" class="create-comment__input" name="name">
            </div>
            <div class="create-comment__item">
                <input type="text" placeholder="Фамилия" class="create-comment__input" name="surname">
            </div>
            <div class="create-comment__item">
                <input type="text" placeholder="Сообщение" class="create-comment__input" name="message">
            </div>
        </div>
        <input type="submit" name="submit" class="create-comment__button">
    </form>  
</body>
</html>
.create-comment__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.create-comment__body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px;
}

.create-comment__item {
    border-radius: 12px;
    flex: 0 0 48%;
}

.create-comment__input {
    height: 100px;
    width: 90%;
    font-size: 20px;
    background: #000;
    padding: 10px 30px;
    color: #fff;
    border-radius: 12px;
    &::placeholder{
        color: #fff;
    }
}

.create-comment__button {
    margin-top: 30px;
    width: 100%;
    max-width: 400px;
    height: 70px;
    border-radius: 12px;
    font-size: 20px;
    background: #EB4C42;
    color: #fff;

    cursor: pointer;
    transition: all .3s ease-in-out;
    &:hover{
        background: #961f17;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.