Explore 3000+ Free UI Elements: CSS & Tailwind

This post is saved as a draft.

#c7b29e

1/* Design Inspired by one of Stefan Devai's Design on Dribble */
2
3.main_wrapper {
4  display: flex;
5  align-items: center;
6  justify-content: center;
7  width: 30em;
8  height: 30em;
9}
10
11.main {
12  display: flex;
13  flex-direction: column;
14  align-items: center;
15  justify-content: center;
16  margin-top: 5em;
17}
18
19.antenna {
20  width: 5em;
21  height: 5em;
22  border-radius: 50%;
23  border: 2px solid black;
24  background-color: #f27405;
25  margin-bottom: -6em;
26  margin-left: 0em;
27  z-index: -1;
28}
29.antenna_shadow {
30  position: absolute;
31  background-color: transparent;
32  width: 50px;
33  height: 56px;
34  margin-left: 1.68em;
35  border-radius: 45%;
36  transform: rotate(140deg);
37  border: 4px solid transparent;
38  box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
39  -moz-box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
40}
41.antenna::after {
42  content: "";
43  position: absolute;
44  margin-top: -9.4em;
45  margin-left: 0.4em;
46  transform: rotate(-25deg);
47  width: 1em;
48  height: 0.5em;
49  border-radius: 50%;
50  background-color: #f69e50;
51}
52.antenna::before {
53  content: "";
54  position: absolute;
55  margin-top: 0.2em;
56  margin-left: 1.25em;
57  transform: rotate(-20deg);
58  width: 1.5em;
59  height: 0.8em;
60  border-radius: 50%;
61  background-color: #f69e50;
62}
63.a1 {
64  position: relative;
65  top: -102%;
66  left: -130%;
67  width: 12em;
68  height: 5.5em;
69  border-radius: 50px;
70  background-image: linear-gradient(
71    #171717,
72    #171717,
73    #353535,
74    #353535,
75    #171717
76  );
77  transform: rotate(-29deg);
78  clip-path: polygon(50% 0%, 49% 100%, 52% 100%);
79}
80.a1d {
81  position: relative;
82  top: -211%;
83  left: -35%;
84  transform: rotate(45deg);
85  width: 0.5em;
86  height: 0.5em;
87  border-radius: 50%;
88  border: 2px solid black;
89  background-color: #979797;
90  z-index: 99;
91}
92.a2 {
93  position: relative;
94  top: -210%;
95  left: -10%;
96  width: 12em;
97  height: 4em;
98  border-radius: 50px;
99  background-color: #171717;
100  background-image: linear-gradient(
101    #171717,
102    #171717,
103    #353535,
104    #353535,
105    #171717
106  );
107  margin-right: 5em;
108  clip-path: polygon(
109    47% 0,
110    47% 0,
111    34% 34%,
112    54% 25%,
113    32% 100%,
114    29% 96%,
115    49% 32%,
116    30% 38%
117  );
118  transform: rotate(-8deg);
119}
120.a2d {
121  position: relative;
122  top: -294%;
123  left: 94%;
124  width: 0.5em;
125  height: 0.5em;
126  border-radius: 50%;
127  border: 2px solid black;
128  background-color: #979797;
129  z-index: 99;
130}
131
132.notfound_text {
133  background-color: black;
134  padding-left: 0.3em;
135  padding-right: 0.3em;
136  font-size: 0.75em;
137  color: white;
138  letter-spacing: 0;
139  border-radius: 5px;
140  z-index: 10;
141}
142.tv {
143  width: 17em;
144  height: 9em;
145  margin-top: 3em;
146  border-radius: 15px;
147  background-color: #d36604;
148  display: flex;
149  justify-content: center;
150  border: 2px solid #1d0e01;
151  box-shadow: inset 0.2em 0.2em #e69635;
152}
153.tv::after {
154  content: "";
155  position: absolute;
156  width: 17em;
157  height: 9em;
158  border-radius: 15px;
159  background: repeating-radial-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%)
160      50% 0/2500px 2500px,
161    repeating-conic-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 60% 60%/2500px
162      2500px;
163  background-blend-mode: difference;
164  opacity: 0.09;
165}
166.curve_svg {
167  position: absolute;
168  margin-top: 0.25em;
169  margin-left: -0.25em;
170  height: 12px;
171  width: 12px;
172}
173.display_div {
174  display: flex;
175  align-items: center;
176  align-self: center;
177  justify-content: center;
178  border-radius: 15px;
179  box-shadow: 3.5px 3.5px 0px #e69635;
180}
181.screen_out {
182  width: auto;
183  height: auto;
184
185  border-radius: 10px;
186}
187.screen_out1 {
188  width: 11em;
189  height: 7.75em;
190  display: flex;
191  align-items: center;
192  justify-content: center;
193  border-radius: 10px;
194}
195.screen {
196  width: 13em;
197  height: 7.85em;
198  font-family: Montserrat;
199  border: 2px solid #1d0e01;
200  background: repeating-radial-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 50% 0/2500px
201      2500px,
202    repeating-conic-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 60% 60%/2500px
203      2500px;
204  background-blend-mode: difference;
205  animation: b 0.2s infinite alternate;
206  border-radius: 10px;
207  z-index: 99;
208  display: flex;
209  align-items: center;
210  justify-content: center;
211  font-weight: bold;
212  color: #252525;
213  letter-spacing: 0.15em;
214  text-align: center;
215}
216@keyframes b {
217  100% {
218    background-position: 50% 0, 60% 50%;
219  }
220}
221
222/* Another Error Screen to Use 
223
224.screen {
225  width: 13em;
226  height: 7.85em;
227  position: relative;
228  background: linear-gradient(to right, #002fc6 0%, #002bb2 14.2857142857%, #3a3a3a 14.2857142857%, #303030 28.5714285714%, #ff0afe 28.5714285714%, #f500f4 42.8571428571%, #6c6c6c 42.8571428571%, #626262 57.1428571429%, #0affd9 57.1428571429%, #00f5ce 71.4285714286%, #3a3a3a 71.4285714286%, #303030 85.7142857143%, white 85.7142857143%, #fafafa 100%);
229  border-radius: 10px;
230  border: 2px solid black;
231  z-index: 99;
232  display: flex;
233  align-items: center;
234  justify-content: center;
235  font-weight: bold;
236  color: #252525;
237  letter-spacing: 0.15em;
238  text-align: center;
239  overflow: hidden;
240}
241.screen:before, .screen:after {
242  content: "";
243  position: absolute;
244  left: 0;
245  z-index: 1;
246  width: 100%;
247}
248.screen:before {
249  top: 0;
250  height: 68.4782608696%;
251  background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);
252}
253.screen:after {
254  bottom: 0;
255  height: 21.7391304348%;
256  background: linear-gradient(to right, #006c6b 0%, #005857 16.6666666667%, white 16.6666666667%, #fafafa 33.3333333333%, #001b75 33.3333333333%, #001761 50%, #6c6c6c 50%, #626262 66.6666666667%, #929292 66.6666666667%, #888888 83.3333333333%, #3a3a3a 83.3333333333%, #303030 100%);
257}
258
259  */
260
261.lines {
262  display: flex;
263  column-gap: 0.1em;
264  align-self: flex-end;
265}
266.line1,
267.line3 {
268  width: 2px;
269  height: 0.5em;
270  background-color: black;
271  border-radius: 25px 25px 0px 0px;
272  margin-top: 0.5em;
273}
274.line2 {
275  flex-grow: 1;
276  width: 2px;
277  height: 1em;
278  background-color: black;
279  border-radius: 25px 25px 0px 0px;
280}
281
282.buttons_div {
283  width: 4.25em;
284  align-self: center;
285  height: 8em;
286  background-color: #e69635;
287  border: 2px solid #1d0e01;
288  padding: 0.6em;
289  border-radius: 10px;
290  display: flex;
291  align-items: center;
292  justify-content: center;
293  flex-direction: column;
294  row-gap: 0.75em;
295  box-shadow: 3px 3px 0px #e69635;
296}
297.b1 {
298  width: 1.65em;
299  height: 1.65em;
300  border-radius: 50%;
301  background-color: #7f5934;
302  border: 2px solid black;
303  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
304    -2px 0px 0px 1px black;
305}
306.b1::before {
307  content: "";
308  position: absolute;
309  margin-top: 1em;
310  margin-left: 0.5em;
311  transform: rotate(47deg);
312  border-radius: 5px;
313  width: 0.1em;
314  height: 0.4em;
315  background-color: #000000;
316}
317.b1::after {
318  content: "";
319  position: absolute;
320  margin-top: 0.9em;
321  margin-left: 0.8em;
322  transform: rotate(47deg);
323  border-radius: 5px;
324  width: 0.1em;
325  height: 0.55em;
326  background-color: #000000;
327}
328.b1 div {
329  content: "";
330  position: absolute;
331  margin-top: -0.1em;
332  margin-left: 0.65em;
333  transform: rotate(45deg);
334  width: 0.15em;
335  height: 1.5em;
336  background-color: #000000;
337}
338.b2 {
339  width: 1.65em;
340  height: 1.65em;
341  border-radius: 50%;
342  background-color: #7f5934;
343  border: 2px solid black;
344  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
345    -2px 0px 0px 1px black;
346}
347.b2::before {
348  content: "";
349  position: absolute;
350  margin-top: 1.05em;
351  margin-left: 0.8em;
352  transform: rotate(-45deg);
353  border-radius: 5px;
354  width: 0.15em;
355  height: 0.4em;
356  background-color: #000000;
357}
358.b2::after {
359  content: "";
360  position: absolute;
361  margin-top: -0.1em;
362  margin-left: 0.65em;
363  transform: rotate(-45deg);
364  width: 0.15em;
365  height: 1.5em;
366  background-color: #000000;
367}
368.speakers {
369  display: flex;
370  flex-direction: column;
371  row-gap: 0.5em;
372}
373.speakers .g1 {
374  display: flex;
375  column-gap: 0.25em;
376}
377.speakers .g1 .g11,
378.g12,
379.g13 {
380  width: 0.65em;
381  height: 0.65em;
382  border-radius: 50%;
383  background-color: #7f5934;
384  border: 2px solid black;
385  box-shadow: inset 1.25px 1.25px 1px #b49577;
386}
387.speakers .g {
388  width: auto;
389  height: 2px;
390  background-color: #171717;
391}
392
393.bottom {
394  width: 100%;
395  height: auto;
396  display: flex;
397  align-items: center;
398  justify-content: center;
399  column-gap: 8.7em;
400}
401.base1 {
402  height: 1em;
403  width: 2em;
404  border: 2px solid #171717;
405  background-color: #4d4d4d;
406  margin-top: -0.15em;
407  z-index: -1;
408}
409.base2 {
410  height: 1em;
411  width: 2em;
412  border: 2px solid #171717;
413  background-color: #4d4d4d;
414  margin-top: -0.15em;
415  z-index: -1;
416}
417.base3 {
418  position: absolute;
419  height: 0.15em;
420  width: 17.5em;
421  background-color: #171717;
422  margin-top: 0.8em;
423}
424
425.text_404 {
426  position: absolute;
427  display: flex;
428  flex-direction: row;
429  column-gap: 6em;
430  z-index: -5;
431  margin-bottom: 2em;
432  align-items: center;
433  justify-content: center;
434  opacity: 0.5;
435  font-family: Montserrat;
436}
437.text_4041 {
438  transform: scaleY(24.5) scaleX(9);
439}
440.text_4042 {
441  transform: scaleY(24.5) scaleX(9);
442}
443.text_4043 {
444  transform: scaleY(24.5) scaleX(9);
445}
446

/* Design Inspired by one of Stefan Devai's Design on Dribble */

.main_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30em;
  height: 30em;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5em;
}

.antenna {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #f27405;
  margin-bottom: -6em;
  margin-left: 0em;
  z-index: -1;
}
.antenna_shadow {
  position: absolute;
  background-color: transparent;
  width: 50px;
  height: 56px;
  margin-left: 1.68em;
  border-radius: 45%;
  transform: rotate(140deg);
  border: 4px solid transparent;
  box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
  -moz-box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;
}
.antenna::after {
  content: "";
  position: absolute;
  margin-top: -9.4em;
  margin-left: 0.4em;
  transform: rotate(-25deg);
  width: 1em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #f69e50;
}
.antenna::before {
  content: "";
  position: absolute;
  margin-top: 0.2em;
  margin-left: 1.25em;
  transform: rotate(-20deg);
  width: 1.5em;
  height: 0.8em;
  border-radius: 50%;
  background-color: #f69e50;
}
.a1 {
  position: relative;
  top: -102%;
  left: -130%;
  width: 12em;
  height: 5.5em;
  border-radius: 50px;
  background-image: linear-gradient(
    #171717,
    #171717,
    #353535,
    #353535,
    #171717
  );
  transform: rotate(-29deg);
  clip-path: polygon(50% 0%, 49% 100%, 52% 100%);
}
.a1d {
  position: relative;
  top: -211%;
  left: -35%;
  transform: rotate(45deg);
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #979797;
  z-index: 99;
}
.a2 {
  position: relative;
  top: -210%;
  left: -10%;
  width: 12em;
  height: 4em;
  border-radius: 50px;
  background-color: #171717;
  background-image: linear-gradient(
    #171717,
    #171717,
    #353535,
    #353535,
    #171717
  );
  margin-right: 5em;
  clip-path: polygon(
    47% 0,
    47% 0,
    34% 34%,
    54% 25%,
    32% 100%,
    29% 96%,
    49% 32%,
    30% 38%
  );
  transform: rotate(-8deg);
}
.a2d {
  position: relative;
  top: -294%;
  left: 94%;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 2px solid black;
  background-color: #979797;
  z-index: 99;
}

.notfound_text {
  background-color: black;
  padding-left: 0.3em;
  padding-right: 0.3em;
  font-size: 0.75em;
  color: white;
  letter-spacing: 0;
  border-radius: 5px;
  z-index: 10;
}
.tv {
  width: 17em;
  height: 9em;
  margin-top: 3em;
  border-radius: 15px;
  background-color: #d36604;
  display: flex;
  justify-content: center;
  border: 2px solid #1d0e01;
  box-shadow: inset 0.2em 0.2em #e69635;
}
.tv::after {
  content: "";
  position: absolute;
  width: 17em;
  height: 9em;
  border-radius: 15px;
  background: repeating-radial-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%)
      50% 0/2500px 2500px,
    repeating-conic-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 60% 60%/2500px
      2500px;
  background-blend-mode: difference;
  opacity: 0.09;
}
.curve_svg {
  position: absolute;
  margin-top: 0.25em;
  margin-left: -0.25em;
  height: 12px;
  width: 12px;
}
.display_div {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  border-radius: 15px;
  box-shadow: 3.5px 3.5px 0px #e69635;
}
.screen_out {
  width: auto;
  height: auto;

  border-radius: 10px;
}
.screen_out1 {
  width: 11em;
  height: 7.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.screen {
  width: 13em;
  height: 7.85em;
  font-family: Montserrat;
  border: 2px solid #1d0e01;
  background: repeating-radial-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 50% 0/2500px
      2500px,
    repeating-conic-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 60% 60%/2500px
      2500px;
  background-blend-mode: difference;
  animation: b 0.2s infinite alternate;
  border-radius: 10px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #252525;
  letter-spacing: 0.15em;
  text-align: center;
}
@keyframes b {
  100% {
    background-position: 50% 0, 60% 50%;
  }
}

/* Another Error Screen to Use 

.screen {
  width: 13em;
  height: 7.85em;
  position: relative;
  background: linear-gradient(to right, #002fc6 0%, #002bb2 14.2857142857%, #3a3a3a 14.2857142857%, #303030 28.5714285714%, #ff0afe 28.5714285714%, #f500f4 42.8571428571%, #6c6c6c 42.8571428571%, #626262 57.1428571429%, #0affd9 57.1428571429%, #00f5ce 71.4285714286%, #3a3a3a 71.4285714286%, #303030 85.7142857143%, white 85.7142857143%, #fafafa 100%);
  border-radius: 10px;
  border: 2px solid black;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #252525;
  letter-spacing: 0.15em;
  text-align: center;
  overflow: hidden;
}
.screen:before, .screen:after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
}
.screen:before {
  top: 0;
  height: 68.4782608696%;
  background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);
}
.screen:after {
  bottom: 0;
  height: 21.7391304348%;
  background: linear-gradient(to right, #006c6b 0%, #005857 16.6666666667%, white 16.6666666667%, #fafafa 33.3333333333%, #001b75 33.3333333333%, #001761 50%, #6c6c6c 50%, #626262 66.6666666667%, #929292 66.6666666667%, #888888 83.3333333333%, #3a3a3a 83.3333333333%, #303030 100%);
}

  */

.lines {
  display: flex;
  column-gap: 0.1em;
  align-self: flex-end;
}
.line1,
.line3 {
  width: 2px;
  height: 0.5em;
  background-color: black;
  border-radius: 25px 25px 0px 0px;
  margin-top: 0.5em;
}
.line2 {
  flex-grow: 1;
  width: 2px;
  height: 1em;
  background-color: black;
  border-radius: 25px 25px 0px 0px;
}

.buttons_div {
  width: 4.25em;
  align-self: center;
  height: 8em;
  background-color: #e69635;
  border: 2px solid #1d0e01;
  padding: 0.6em;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 0.75em;
  box-shadow: 3px 3px 0px #e69635;
}
.b1 {
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  background-color: #7f5934;
  border: 2px solid black;
  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
    -2px 0px 0px 1px black;
}
.b1::before {
  content: "";
  position: absolute;
  margin-top: 1em;
  margin-left: 0.5em;
  transform: rotate(47deg);
  border-radius: 5px;
  width: 0.1em;
  height: 0.4em;
  background-color: #000000;
}
.b1::after {
  content: "";
  position: absolute;
  margin-top: 0.9em;
  margin-left: 0.8em;
  transform: rotate(47deg);
  border-radius: 5px;
  width: 0.1em;
  height: 0.55em;
  background-color: #000000;
}
.b1 div {
  content: "";
  position: absolute;
  margin-top: -0.1em;
  margin-left: 0.65em;
  transform: rotate(45deg);
  width: 0.15em;
  height: 1.5em;
  background-color: #000000;
}
.b2 {
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  background-color: #7f5934;
  border: 2px solid black;
  box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,
    -2px 0px 0px 1px black;
}
.b2::before {
  content: "";
  position: absolute;
  margin-top: 1.05em;
  margin-left: 0.8em;
  transform: rotate(-45deg);
  border-radius: 5px;
  width: 0.15em;
  height: 0.4em;
  background-color: #000000;
}
.b2::after {
  content: "";
  position: absolute;
  margin-top: -0.1em;
  margin-left: 0.65em;
  transform: rotate(-45deg);
  width: 0.15em;
  height: 1.5em;
  background-color: #000000;
}
.speakers {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}
.speakers .g1 {
  display: flex;
  column-gap: 0.25em;
}
.speakers .g1 .g11,
.g12,
.g13 {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background-color: #7f5934;
  border: 2px solid black;
  box-shadow: inset 1.25px 1.25px 1px #b49577;
}
.speakers .g {
  width: auto;
  height: 2px;
  background-color: #171717;
}

.bottom {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8.7em;
}
.base1 {
  height: 1em;
  width: 2em;
  border: 2px solid #171717;
  background-color: #4d4d4d;
  margin-top: -0.15em;
  z-index: -1;
}
.base2 {
  height: 1em;
  width: 2em;
  border: 2px solid #171717;
  background-color: #4d4d4d;
  margin-top: -0.15em;
  z-index: -1;
}
.base3 {
  position: absolute;
  height: 0.15em;
  width: 17.5em;
  background-color: #171717;
  margin-top: 0.8em;
}

.text_404 {
  position: absolute;
  display: flex;
  flex-direction: row;
  column-gap: 6em;
  z-index: -5;
  margin-bottom: 2em;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-family: Montserrat;
}
.text_4041 {
  transform: scaleY(24.5) scaleX(9);
}
.text_4042 {
  transform: scaleY(24.5) scaleX(9);
}
.text_4043 {
  transform: scaleY(24.5) scaleX(9);
}

Variation of acard