Form by zanina-yassine

Made by

@zanina-yassine

Theme:

Light

#form

#e8e8e8

338 views

CSSAdd prefixes

1.card {
2  width: 450px;
3  height: fit-content;
4  background-color: white;
5  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
6  border-radius: 17px 17px 27px 27px;
7}
8
9.title {
10  width: 100%;
11  height: 50px;
12  position: relative;
13  display: flex;
14  align-items: center;
15  padding-left: 20px;
16  border-bottom: 1px solid #f1f1f1;
17  font-weight: 700;
18  font-size: 13px;
19  color: #47484b;
20}
21
22.title::after {
23  content: '';
24  width: 8ch;
25  height: 1px;
26  position: absolute;
27  bottom: -1px;
28  background-color: #47484b;
29}
30
31.comments {
32  display: grid;
33  grid-template-columns: 35px 1fr;
34  gap: 20px;
35  padding: 20px;
36}
37
38.comment-react {
39  width: 35px;
40  height: fit-content;
41  display: grid;
42  grid-template-columns: auto;
43  margin: 0;
44  background-color: #f1f1f1;
45  border-radius: 5px;
46}
47
48.comment-react button {
49  width: 35px;
50  height: 35px;
51  position: relative;
52  display: flex;
53  align-items: center;
54  justify-content: center;
55  background-color: transparent;
56  border: 0;
57  outline: none;
58}
59
60.comment-react button:after {
61  content: '';
62  width: 40px;
63  height: 40px;
64  position: absolute;
65  left: -2.5px;
66  top: -2.5px;
67  background-color: #f5356e;
68  border-radius: 50%;
69  z-index: 0;
70  transform: scale(0);
71}
72
73.comment-react button svg {
74  position: relative;
75  z-index: 9;
76}
77
78.comment-react button:hover:after {
79  animation: ripple 0.6s ease-in-out forwards;
80}
81
82.comment-react button:hover svg {
83  fill: #f5356e;
84}
85
86.comment-react button:hover svg path {
87  stroke: #f5356e;
88  fill: #f5356e;
89}
90
91.comment-react hr {
92  width: 80%;
93  height: 1px;
94  background-color: #dfe1e6;
95  margin: auto;
96  border: 0;
97}
98
99.comment-react span {
100  height: 35px;
101  display: flex;
102  align-items: center;
103  justify-content: center;
104  margin: auto;
105  font-size: 13px;
106  font-weight: 600;
107  color: #707277;
108}
109
110.comment-container {
111  display: flex;
112  flex-direction: column;
113  gap: 15px;
114  padding: 0;
115  margin: 0;
116}
117
118.comment-container .user {
119  display: grid;
120  grid-template-columns: 40px 1fr;
121  gap: 10px;
122}
123
124.comment-container .user .user-pic {
125  width: 40px;
126  height: 40px;
127  position: relative;
128  display: flex;
129  align-items: center;
130  justify-content: center;
131  background-color: #f1f1f1;
132  border-radius: 50%;
133}
134
135.comment-container .user .user-pic:after {
136  content: '';
137  width: 9px;
138  height: 9px;
139  position: absolute;
140  right: 0px;
141  bottom: 0px;
142  border-radius: 50%;
143  background-color: #0fc45a;
144  border: 2px solid #ffffff;
145}
146
147.comment-container .user .user-info {
148  width: 100%;
149  display: flex;
150  flex-direction: column;
151  align-items: flex-start;
152  justify-content: center;
153  gap: 3px;
154}
155
156.comment-container .user .user-info span {
157  font-weight: 700;
158  font-size: 12px;
159  color: #47484b;
160}
161
162.comment-container .user .user-info p {
163  font-weight: 600;
164  font-size: 10px;
165  color: #acaeb4;
166}
167
168.comment-container .comment-content {
169  font-size: 12px;
170  line-height: 16px;
171  font-weight: 600;
172  color: #5f6064;
173}
174
175.text-box {
176  width: 100%;
177  height: fit-content;
178  background-color: #f1f1f1;
179  padding: 8px;
180}
181
182.text-box .box-container {
183  background-color: #ffffff;
184  border-radius: 8px 8px 21px 21px;
185  padding: 8px;
186}
187
188.text-box textarea {
189  width: 100%;
190  height: 40px;
191  resize: none;
192  border: 0;
193  border-radius: 6px;
194  padding: 12px 12px 10px 12px;
195  font-size: 13px;
196  outline: none;
197  caret-color: #0a84ff;
198}
199
200.text-box .formatting {
201  display: grid;
202  grid-template-columns: auto auto auto auto auto 1fr;
203}
204
205.text-box .formatting button {
206  width: 30px;
207  height: 30px;
208  position: relative;
209  display: flex;
210  align-items: center;
211  justify-content: center;
212  background-color: transparent;
213  border-radius: 50%;
214  border: 0;
215  outline: none;
216}
217
218.text-box .formatting button:hover {
219  background-color: #f1f1f1;
220}
221
222.text-box .formatting .send {
223  width: 30px;
224  height: 30px;
225  background-color: #0a84ff;
226  margin: 0 0 0 auto;
227}
228
229.text-box .formatting .send:hover {
230  background-color: #026eda;
231}
232
233@keyframes ripple {
234  0% {
235    transform: scale(0);
236    opacity: 0.6;
237  }
238
239  100% {
240    transform: scale(1);
241    opacity: 0;
242  }
243}

.card {
  width: 450px;
  height: fit-content;
  background-color: white;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 17px 17px 27px 27px;
}

.title {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #f1f1f1;
  font-weight: 700;
  font-size: 13px;
  color: #47484b;
}

.title::after {
  content: '';
  width: 8ch;
  height: 1px;
  position: absolute;
  bottom: -1px;
  background-color: #47484b;
}

.comments {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 20px;
  padding: 20px;
}

.comment-react {
  width: 35px;
  height: fit-content;
  display: grid;
  grid-template-columns: auto;
  margin: 0;
  background-color: #f1f1f1;
  border-radius: 5px;
}

.comment-react button {
  width: 35px;
  height: 35px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  outline: none;
}

.comment-react button:after {
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  left: -2.5px;
  top: -2.5px;
  background-color: #f5356e;
  border-radius: 50%;
  z-index: 0;
  transform: scale(0);
}

.comment-react button svg {
  position: relative;
  z-index: 9;
}

.comment-react button:hover:after {
  animation: ripple 0.6s ease-in-out forwards;
}

.comment-react button:hover svg {
  fill: #f5356e;
}

.comment-react button:hover svg path {
  stroke: #f5356e;
  fill: #f5356e;
}

.comment-react hr {
  width: 80%;
  height: 1px;
  background-color: #dfe1e6;
  margin: auto;
  border: 0;
}

.comment-react span {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 13px;
  font-weight: 600;
  color: #707277;
}

.comment-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0;
  margin: 0;
}

.comment-container .user {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
}

.comment-container .user .user-pic {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  border-radius: 50%;
}

.comment-container .user .user-pic:after {
  content: '';
  width: 9px;
  height: 9px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  border-radius: 50%;
  background-color: #0fc45a;
  border: 2px solid #ffffff;
}

.comment-container .user .user-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}

.comment-container .user .user-info span {
  font-weight: 700;
  font-size: 12px;
  color: #47484b;
}

.comment-container .user .user-info p {
  font-weight: 600;
  font-size: 10px;
  color: #acaeb4;
}

.comment-container .comment-content {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #5f6064;
}

.text-box {
  width: 100%;
  height: fit-content;
  background-color: #f1f1f1;
  padding: 8px;
}

.text-box .box-container {
  background-color: #ffffff;
  border-radius: 8px 8px 21px 21px;
  padding: 8px;
}

.text-box textarea {
  width: 100%;
  height: 40px;
  resize: none;
  border: 0;
  border-radius: 6px;
  padding: 12px 12px 10px 12px;
  font-size: 13px;
  outline: none;
  caret-color: #0a84ff;
}

.text-box .formatting {
  display: grid;
  grid-template-columns: auto auto auto auto auto 1fr;
}

.text-box .formatting button {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 50%;
  border: 0;
  outline: none;
}

.text-box .formatting button:hover {
  background-color: #f1f1f1;
}

.text-box .formatting .send {
  width: 30px;
  height: 30px;
  background-color: #0a84ff;
  margin: 0 0 0 auto;
}

.text-box .formatting .send:hover {
  background-color: #026eda;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

HTML

1<div class="card">
2  <span class="title">Comments</span>
3  <div class="comments">
4    <div class="comment-react">
5      <button>
6        <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
7          <path fill="#707277" stroke-linecap="round" stroke-width="2" stroke="#707277" d="M19.4626 3.99415C16.7809 2.34923 14.4404 3.01211 13.0344 4.06801C12.4578 4.50096 12.1696 4.71743 12 4.71743C11.8304 4.71743 11.5422 4.50096 10.9656 4.06801C9.55962 3.01211 7.21909 2.34923 4.53744 3.99415C1.01807 6.15294 0.221721 13.2749 8.33953 19.2834C9.88572 20.4278 10.6588 21 12 21C13.3412 21 14.1143 20.4278 15.6605 19.2834C23.7783 13.2749 22.9819 6.15294 19.4626 3.99415Z"></path>
8        </svg>
9      </button>
10      <hr>
11      <span>14</span>
12    </div>
13    <div class="comment-container">
14      <div class="user">
15        <div class="user-pic">
16          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
17            <path stroke-linejoin="round" fill="#707277" stroke-linecap="round" stroke-width="2" stroke="#707277" d="M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z"></path>
18            <path stroke-width="2" fill="#707277" stroke="#707277" d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z"></path>
19          </svg>
20        </div>
21        <div class="user-info">
22          <span>Yassine Zanina</span>
23          <p>Wednesday, March 13th at 2:45pm</p>
24        </div>
25      </div>
26      <p class="comment-content">
27        I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to
28        use, and the features are exactly what I need to streamline my workflow.
29      </p>
30    </div>
31  </div>
32
33  <div class="text-box">
34    <div class="box-container">
35      <textarea placeholder="Reply"></textarea>
36      <div>
37        <div class="formatting">
38          <button type="button">
39            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
40              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M5 6C5 4.58579 5 3.87868 5.43934 3.43934C5.87868 3 6.58579 3 8 3H12.5789C15.0206 3 17 5.01472 17 7.5C17 9.98528 15.0206 12 12.5789 12H5V6Z" clip-rule="evenodd" fill-rule="evenodd"></path>
41              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M12.4286 12H13.6667C16.0599 12 18 14.0147 18 16.5C18 18.9853 16.0599 21 13.6667 21H8C6.58579 21 5.87868 21 5.43934 20.5607C5 20.1213 5 19.4142 5 18V12"></path>
42            </svg>
43          </button>
44          <button type="button">
45            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
46              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M12 4H19"></path>
47              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M8 20L16 4"></path>
48              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M5 20H12"></path>
49            </svg>
50          </button>
51          <button type="button">
52            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
53              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M5.5 3V11.5C5.5 15.0899 8.41015 18 12 18C15.5899 18 18.5 15.0899 18.5 11.5V3"></path>
54              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M3 21H21"></path>
55            </svg>
56          </button>
57          <button type="button">
58            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
59            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M4 12H20"></path>
60            <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M17.5 7.66667C17.5 5.08934 15.0376 3 12 3C8.96243 3 6.5 5.08934 6.5 7.66667C6.5 8.15279 6.55336 8.59783 6.6668 9M6 16.3333C6 18.9107 8.68629 21 12 21C15.3137 21 18 19.6667 18 16.3333C18 13.9404 16.9693 12.5782 14.9079 12"></path>
61            </svg>
62          </button>
63          <button type="button">
64            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
65<circle stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" r="10" cy="12" cx="12"></circle>
66<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M8 15C8.91212 16.2144 10.3643 17 12 17C13.6357 17 15.0879 16.2144 16 15"></path>
67<path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#707277" d="M8.00897 9L8 9M16 9L15.991 9"></path>
68</svg>
69          </button>
70          <button type="submit" class="send" title="Send">
71            <svg fill="none" viewBox="0 0 24 24" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
72              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#ffffff" d="M12 5L12 20"></path>
73              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#ffffff" d="M7 9L11.2929 4.70711C11.6262 4.37377 11.7929 4.20711 12 4.20711C12.2071 4.20711 12.3738 4.37377 12.7071 4.70711L17 9"></path>
74            </svg>
75          </button>
76        </div>
77      </div>
78    </div>
79  </div>
80</div>

<div class="card">
  <span class="title">Comments</span>
  <div class="comments">
    <div class="comment-react">
      <button>
        <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
          <path fill="#707277" stroke-linecap="round" stroke-width="2" stroke="#707277" d="M19.4626 3.99415C16.7809 2.34923 14.4404 3.01211 13.0344 4.06801C12.4578 4.50096 12.1696 4.71743 12 4.71743C11.8304 4.71743 11.5422 4.50096 10.9656 4.06801C9.55962 3.01211 7.21909 2.34923 4.53744 3.99415C1.01807 6.15294 0.221721 13.2749 8.33953 19.2834C9.88572 20.4278 10.6588 21 12 21C13.3412 21 14.1143 20.4278 15.6605 19.2834C23.7783 13.2749 22.9819 6.15294 19.4626 3.99415Z"></path>
        </svg>
      </button>
      <hr>
      <span>14</span>
    </div>
    <div class="comment-container">
      <div class="user">
        <div class="user-pic">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" fill="#707277" stroke-linecap="round" stroke-width="2" stroke="#707277" d="M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z"></path>
            <path stroke-width="2" fill="#707277" stroke="#707277" d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z"></path>
          </svg>
        </div>
        <div class="user-info">
          <span>Yassine Zanina</span>
          <p>Wednesday, March 13th at 2:45pm</p>
        </div>
      </div>
      <p class="comment-content">
        I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to
        use, and the features are exactly what I need to streamline my workflow.
      </p>
    </div>
  </div>

  <div class="text-box">
    <div class="box-container">
      <textarea placeholder="Reply"></textarea>
      <div>
        <div class="formatting">
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M5 6C5 4.58579 5 3.87868 5.43934 3.43934C5.87868 3 6.58579 3 8 3H12.5789C15.0206 3 17 5.01472 17 7.5C17 9.98528 15.0206 12 12.5789 12H5V6Z" clip-rule="evenodd" fill-rule="evenodd"></path>
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M12.4286 12H13.6667C16.0599 12 18 14.0147 18 16.5C18 18.9853 16.0599 21 13.6667 21H8C6.58579 21 5.87868 21 5.43934 20.5607C5 20.1213 5 19.4142 5 18V12"></path>
            </svg>
          </button>
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M12 4H19"></path>
              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M8 20L16 4"></path>
              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M5 20H12"></path>
            </svg>
          </button>
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M5.5 3V11.5C5.5 15.0899 8.41015 18 12 18C15.5899 18 18.5 15.0899 18.5 11.5V3"></path>
              <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M3 21H21"></path>
            </svg>
          </button>
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M4 12H20"></path>
            <path stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M17.5 7.66667C17.5 5.08934 15.0376 3 12 3C8.96243 3 6.5 5.08934 6.5 7.66667C6.5 8.15279 6.55336 8.59783 6.6668 9M6 16.3333C6 18.9107 8.68629 21 12 21C15.3137 21 18 19.6667 18 16.3333C18 13.9404 16.9693 12.5782 14.9079 12"></path>
            </svg>
          </button>
          <button type="button">
            <svg fill="none" viewBox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<circle stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" r="10" cy="12" cx="12"></circle>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#707277" d="M8 15C8.91212 16.2144 10.3643 17 12 17C13.6357 17 15.0879 16.2144 16 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="#707277" d="M8.00897 9L8 9M16 9L15.991 9"></path>
</svg>
          </button>
          <button type="submit" class="send" title="Send">
            <svg fill="none" viewBox="0 0 24 24" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#ffffff" d="M12 5L12 20"></path>
              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#ffffff" d="M7 9L11.2929 4.70711C11.6262 4.37377 11.7929 4.20711 12 4.20711C12.2071 4.20711 12.3738 4.37377 12.7071 4.70711L17 9"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>