-
Notifications
You must be signed in to change notification settings - Fork 0
/
react.html
2344 lines (2294 loc) · 124 KB
/
react.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<title>DashCode</title>
<meta name="keywords" content="DashCode" />
<meta name="description" content="DashCode" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- FavIcon CSS -->
<link rel="icon" href="assets/img/favicon.png" type="image/gif" sizes="16x16">
<!--Google Fonts CSS-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<!--Font Awesome Icon CSS-->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!--Bootstrap CSS-->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- Carousel Slider CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">
<!-- Main Style CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/test.css">
</head>
<body>
<!-- hearer-area start -->
<header class="header-area ">
<div class="header-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-3 col-lg-2 col-md-3">
<div class="logo">
<a href="index.html">
<img src="assets/img/logo-react.png" alt="logo">
</a>
</div>
</div>
<!-- col-xl-2 col-lg-2 end -->
<div class="col-xl-6 col-lg-8 col-md-9">
<div class="main-menu text-center">
<nav class="main-navigation">
<button class="toggle-button">
<span></span>
<span class="toggle-width-two"></span>
<span></span>
</button>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#demo">Demo</a>
</li>
<li>
<a href="#pricing">Pricing</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li class="lg-none">
<div class="purchase-now">
<a target="_blank" href="https://themeforest.net/item/dashcode-admin-dashboard-template/42600453"
class="common-btn btn-transparent purchase-btn">Purchase Now</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
<!-- col-xl-9 col-lg-8 end -->
<div class="col-xl-3 col-lg-2 sm-none">
<div class="purchase-now text-end">
<a target="_blank" href="https://themeforest.net/item/dashcode-admin-dashboard-template/42600453"
class="common-btn btn-transparent purchase-btn">Purchase Now</a>
</div>
</div>
<!-- col-xl-2 col-lg-2 end -->
</div>
</div>
</div>
</header>
<!-- hearer-area end -->
<main>
<!-- banner-area start -->
<section class="banner-area">
<div class="banner-shape">
<img src="assets/img/landscape-discover-modules-t 1.png" alt="landscape">
</div>
<div class="banner-shape-w">
<div class="banner-shape-1 position-absolute">
<img src="assets/img/php 6.png" alt="shape">
</div>
<div class="banner-shape-3 position-absolute">
<img src="assets/img/php 8.png" alt="shape">
</div>
<div class="banner-shape-7 position-absolute">
<img src="assets/img/php 2.png" alt="shape">
</div>
</div>
<!-- banner-shape-w end -->
<div class="container">
<div class="row">
<div class=" col-xl-5 col-lg-6 col-md-12 mb-sm-30">
<div class="banner-content">
<div class="com-title">
<h1 class="section-title text-start ">
<span class="custom-heading">DashCode React</span> The Most Powerful & Fastest Admin Template
</h1>
<p class="section-sub-title">
We present you with the most powerful, simplest, and fastest developer-friendly and highly
customizable
React, Vue, and Tailwind admin templates to build web UI for your app.
</p>
</div> <!-- com-title end -->
<div class="banner-btn d-flex">
<a href="https://dashcode-react.codeshaper.net" target="__blank" class="common-btn">
View Demo
</a>
<a href="https://dashcode-react-doc.codeshaper.tech" target="__blank"
class="position-relative common-btn btn-transparent">
View Documentation
</a>
</div> <!-- banner-btn end -->
<div class="counter-box-one d-flex flex-wrap ">
<div class="counter-box-content flex-center ">
<h2 class="h2-title">5</h2>
<p class="font-12">Conceptual<br>Dashboards</p>
</div> <!-- counter-box-content end -->
<div class="counter-box-content flex-center ">
<h2 class="h2-title">7</h2>
<p class="font-12">Ready-Made<br>Applications</p>
</div> <!-- counter-box-content end -->
<div class="counter-box-content flex-center ">
<h2 class="h2-title">100+</h2>
<p class="font-12">Well Crafted<br>Pages</p>
</div> <!-- counter-box-content end -->
<div class="counter-box-content flex-center ">
<h2 class="h2-title">100+</h2>
<p class="font-12">Advanced<br>Elements</p>
</div> <!-- counter-box-content end -->
<div class="counter-box-content flex-center ">
<h2 class="h2-title">100+</h2>
<p class="font-12">Usable<br>Components</p>
</div> <!-- counter-box-content end -->
</div>
<!-- counter-box-one end -->
</div>
<!-- banner-content end -->
</div>
<!-- col-md-7 end -->
<div class="col-xl-7 col-lg-6 col-md-12 mb-sm-30">
<div class="banner-slider-wrapper">
<div class="banner-slider">
<div class="image before" style="background-image: url(assets/img/creative-1.png);"> </div>
<div class="image after" style="background-image: url(assets/img/creative-2.png);"> </div>
<input type="range" class="slider" min="1" max="100" value="50" />
<div class="slider-button">
<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-right"></i>
</div>
</div> <!-- banner-slider end -->
</div>
</div>
<!-- col-md-7 end -->
</div>
</div>
<!-- container end -->
</section>
<!-- banner-area end -->
<!-- counter-area start -->
<section class="counter-area" id="counter">
<div class="container">
<div class="bg-1 border-radious-12">
<div class="row">
<div class="col-12 col-xs-6 col-sm-6 col-md-3 col-lg-3 mb-sm-20">
<div class="counter-box-content text-center">
<h3 class="content-title mb-10">Loved By</h3>
<div class="d-counter d-flex justify-content-center">
<h2 class="h2-title blue-color counting-data" data-count="1600">0</h2>
<span class="h2-title blue-color">+</span>
</div>
</div> <!--counter-box-content end-->
</div>
<!-- col-md-3 end -->
<div class="col-12 col-xs-6 col-sm-6 col-md-3 col-lg-3 mb-sm-20">
<div class="counter-box-content text-center">
<h3 class="content-title mb-10">Rated 5 Stars</h3>
<div class="d-counter d-flex justify-content-center">
<h2 class="h2-title blue-color counting-data" data-count="30">0</h2>
<span class="h2-title blue-color">+</span>
</div>
</div> <!--counter-box-content end-->
</div>
<!-- col-md-3 end -->
<div class="col-12 col-xs-6 col-sm-6 col-md-3 col-lg-3 mb-sm-20">
<div class="counter-box-content text-center">
<h3 class="content-title mb-10">End User</h3>
<div class="d-counter d-flex justify-content-center">
<h2 class="h2-title blue-color counting-data" data-count="10000">0</h2>
<span class="h2-title blue-color">+</span>
</div>
</div> <!--counter-box-content end-->
</div>
<!-- col-md-3 end -->
<div class="col-12 col-xs-6 col-sm-6 col-md-3 col-lg-3 mb-sm-20">
<div class="counter-box-content text-center">
<h3 class="content-title mb-10">On The Themeforest</h3>
<div class="d-counter d-flex justify-content-center">
<h2 class="h2-title blue-color counting-data" data-count="8">0</h2>
<span class="h2-title blue-color" style="margin-left: 10px;"> Months</span>
</div>
</div> <!--counter-box-content end-->
</div>
<!-- col-md-3 end -->
</div>
</div>
<!-- container end -->
</div>
</section>
<!-- counter-area end -->
<!-- partner-area start -->
<section class="partner-area sec-padding-70">
<div class="container">
<div class="text-center com-title">
<h1 class="section-title">
Trusted By Developers From </br>All Over The World
</h1>
</div> <!-- com-title end -->
<div class="con-pt-50">
<div class="partner-carousel owl-carousel">
<div class="partner-item">
<div class="partner-img">
<a href="https://upgiant.com/" target="_blank"><img src="assets/img/1.png" alt=""></a>
</div>
</div> <!-- col-lg-2 end -->
<div class="partner-item">
<div class="partner-img">
<a href="https://www.airalo.com/" target="_blank"><img src="assets/img/c.svg" alt=""></a>
</div>
</div> <!-- col-lg-2 end -->
<div class="partner-item">
<div class="partner-img">
<a href="https://txtsync.com/" target="_blank"><img src="assets/img/txtsync.png" alt=""></a>
</div>
</div> <!-- col-lg-2 end -->
<div class="partner-item">
<div class="partner-img">
<a href="http://customable.de" target="_blank"><img src="assets/img/customable.png" alt=""></a>
</div>
</div> <!-- col-lg-2 end -->
<div class="partner-item">
<div class="partner-img">
<a href="https://sklepstrazacki.pl/" target="_blank"><img src="assets/img/logo-1669968566.webp"
alt=""></a>
</div>
</div> <!-- col-lg-2 end -->
<div class="partner-item">
<div class="partner-img">
<a href="https://sevensolutions.com.br/" target="_blank"><img src="assets/img/Logo-Branco.png"
alt=""></a>
</div>
</div> <!-- col-lg-2 end -->
<div class="partner-item">
<div class="partner-img">
<a href="https://earthinnovation.org/" target="_blank"><img
src="assets/img/EII-LOGO_horizontalwhitetexttrans.png" alt=""></a>
</div>
</div> <!-- col-lg-2 end -->
<div class="partner-item">
<div class="partner-img">
<img src="assets/img/prodsisavatar.2cdd2948.jpg" alt="">
</div>
</div> <!-- col-lg-2 end -->
<div class="partner-item">
<div class="partner-img">
<a href="https://www.nuance.com" target="_blank"><img
src="assets/img/logo-nuance-black-horizontal-small.png" alt=""></a>
</div>
</div> <!-- col-lg-2 end -->
</div>
</div>
<!-- con-pt-50 end -->
</div>
</section>
<!-- partner-area end -->
<!-- app-area start -->
<section class="app-area sec-padding-70" id="demo">
<div class="container">
<div class="d-sm-block d-md-flex align-items-start">
<div class="app-sidebar-content pt-sm-3 pt-lg-0">
<div class="tab-content " id="v-pills-tabContent">
<!-- tab-pane End -->
<div class="tab-pane fade show active" id="v-pills-react" role="tabpanel"
aria-labelledby="v-pills-react-tab">
<div class="frame-item">
<ul class="nav nav-pills app-sidebar-content-header" id="pills-tab" role="tablist">
<li class="nav-item">
<a target="_blank" href="https://dashcode-react-doc.codeshaper.tech/"
class="common-btn ">Documentation</a>
</li>
<div class="m-auto"> </div>
<li class="nav-item app-version-icon d-flex gap-2 me-lg-3 me-2" role="presentation">
<button class="nav-link" id="pills-lightreact-tab" data-bs-toggle="pill"
data-bs-target="#pills-lightreact" type="button" role="tab" aria-controls="pills-lightreact"
aria-selected="false">
<input type="radio" id="lightreact" name="radio-group">
<label for="lightreact">Light</label>
</button>
<button class="nav-link" id="pills-darkreact-tab" data-bs-toggle="pill"
data-bs-target="#pills-darkreact" type="button" role="tab" aria-controls="pills-darkreact"
aria-selected="false">
<input type="radio" id="darkreact" name="radio-group">
<label for="darkreact">dark</label>
</button>
</li>
<li class="nav-item app-version-icon d-flex gap-2" role="presentation">
<button class="nav-link" id="pills-ltrreact-tab" data-bs-toggle="pill"
data-bs-target="#pills-ltrreact" type="button" role="tab" aria-controls="pills-ltrreact"
aria-selected="false">
<input type="radio" id="ltrreact" name="radio-group" checked>
<label for="ltrreact">LTR</label>
</button>
<button class="nav-link" id="pills-rtlreact-tab" data-bs-toggle="pill"
data-bs-target="#pills-rtlreact" type="button" role="tab" aria-controls="pills-rtlreact"
aria-selected="false">
<input type="radio" id="rtlreact" name="radio-group">
<label for="rtlreact">RTL</label>
</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-gridreact" role="tabpanel"
aria-labelledby="pills-gridreact-tab">
<div class="row">
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/dashboard">
<h4 class="section-sub-title text-color">
Analytics Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/apps-1.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/ecommerce">
<h4 class="section-sub-title text-color">
Ecommerce Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/apps-2.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a arget="_blank" href="https://dashcode-react.codeshaper.net/project">
<h4 class="section-sub-title text-color">
Project Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/project11.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/crm">
<h4 class="section-sub-title text-color">
CRM Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/crm11.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/banking">
<h4 class="section-sub-title text-color">
Bank Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/bank.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription comming-soon">
<a target="_blank" href="#">
<h4 class="section-sub-title text-color">
Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/apps-2.png" alt="apps" loading="lazy">
<h3 class="content-title">Comming Soon</h3>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
</div>
</div>
<div class="tab-pane fade" id="pills-lightreact" role="tabpanel"
aria-labelledby="pills-lightreact-tab">
<div class="row">
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/dashboard">
<h4 class="section-sub-title text-color">
Analytics Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/apps-1.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-4 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/crm">
<h4 class="section-sub-title text-color">
CRM Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/crm11.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-4 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/bank">
<h4 class="section-sub-title text-color">
Bank Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/bank.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-4 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/chat">
<h4 class="section-sub-title text-color">
Chat App
</h4>
<div class="apps-image">
<img src="assets/img/Chat.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-4 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/kanban">
<h4 class="section-sub-title text-color">
Kanban App
</h4>
<div class="apps-image">
<img src="assets/img/Kanban.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-4 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/todo">
<h4 class="section-sub-title text-color">
Todo App
</h4>
<div class="apps-image">
<img src="assets/img/Todo.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-4 end -->
</div>
</div>
<div class="tab-pane fade" id="pills-darkreact" role="tabpanel"
aria-labelledby="pills-darkreact-tab">
<div class="row">
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/dashboard">
<h4 class="section-sub-title text-color">
Ecommerce Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/apps-2.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/project">
<h4 class="section-sub-title text-color">
Project Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/project11.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/email">
<h4 class="section-sub-title text-color">
Email App
</h4>
<div class="apps-image">
<img src="assets/img/Email.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/chat">
<h4 class="section-sub-title text-color">
Calender App
</h4>
<div class="apps-image">
<img src="assets/img/Calender.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/projects">
<h4 class="section-sub-title text-color">
Project App
</h4>
<div class="apps-image">
<img src="assets/img/Project (1).png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-md-6 mb-20 d-none">
<div class="app-area-decription comming-soon">
<a href="#">
<h4 class="section-sub-title text-color">
Calendar App
</h4>
<div class="apps-image">
<img src="assets/img/apps-2.png" alt="apps" loading="lazy">
<h3 class="content-title bg-transparent">Comming Soon
</h3>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-ltrreact" role="tabpanel" aria-labelledby="pills-ltrreact-tab">
<div class="row">
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/dashboard">
<h4 class="section-sub-title text-color">
Analytics Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/apps-1.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/ecommerce">
<h4 class="section-sub-title text-color">
Ecommerce Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/apps-2.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/project">
<h4 class="section-sub-title text-color">
Project Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/project11.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/crm">
<h4 class="section-sub-title text-color">
CRM Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/crm11.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/banking">
<h4 class="section-sub-title text-color">
Bank Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/bank.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/chat">
<h4 class="section-sub-title text-color">
Chat App
</h4>
<div class="apps-image">
<img src="assets/img/Chat.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/email">
<h4 class="section-sub-title text-color">
Email App
</h4>
<div class="apps-image">
<img src="assets/img/Email.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/kanban">
<h4 class="section-sub-title text-color">
Kanban App
</h4>
<div class="apps-image">
<img src="assets/img/Kanban.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/calender">
<h4 class="section-sub-title text-color">
Calender App
</h4>
<div class="apps-image">
<img src="assets/img/Calender.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/todo">
<h4 class="section-sub-title text-color">
Todo App
</h4>
<div class="apps-image">
<img src="assets/img/Todo.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/projects">
<h4 class="section-sub-title text-color">
Project App
</h4>
<div class="apps-image">
<img src="assets/img/Project (1).png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
</div>
</div>
<div class="tab-pane fade" id="pills-rtlreact" role="tabpanel" aria-labelledby="pills-rtlreact-tab">
<div class="row">
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/ecommerce">
<h4 class="section-sub-title text-color">
Analytics Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/Light RTL.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/ecommerce">
<h4 class="section-sub-title text-color">
Ecommerce Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/Dark RTL.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/project">
<h4 class="section-sub-title text-color">
Project Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/Light RTL.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/crm">
<h4 class="section-sub-title text-color">
CRM Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/Dark RTL.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
<div class="col-sm-6 col-md-4 mb-20">
<div class="app-area-decription">
<a target="_blank" href="https://dashcode-react.codeshaper.net/banking">
<h4 class="section-sub-title text-color">
Banking Dashboard
</h4>
<div class="apps-image">
<img src="assets/img/Dark RTL.png" alt="apps" loading="lazy">
<button class="common-btn">View Demo</button>
</div>
</a>
</div> <!-- app-area-decription end -->
</div>
<!-- col-md-6 end -->
</div>
</div>
</div>
</div>
</div>
<!-- tab-pane End -->
</div>
</div>
</div>
</div>
</section>
<!-- app-area end -->
<!-- components-area start -->
<section class="components-area back-img" data-background="assets/img/component.png">
<div class="container">
<div class="com-title text-center">
<h1 class="section-title">
Components
</h1>
<div class="col-md-12 col-lg-8 offset-lg-2">
<p class="section-sub-title">
Dashcode provides an extensive collection of components. Our components are themed with
tailwind principles and created perfect design parallelism.
</p>
</div>
</div>
<div class="component-grid-6 con-pt-50">
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M28.0001 21.0001V29.7501M6.29307 37.6274C4.2724 41.1274 6.7994 45.5001 10.8384 45.5001H45.1617C49.1984 45.5001 51.7254 41.1274 49.7071 37.6274L32.5477 7.88208C30.5271 4.38208 25.4731 4.38208 23.4524 7.88208L6.29307 37.6274V37.6274ZM28.0001 36.7501H28.0164V36.7687H28.0001V36.7501Z"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Alerts</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M30.7767 20.2721C32.293 20.996 33.6134 22.0732 34.627 23.4133C35.6406 24.7533 36.3178 26.3171 36.6017 27.9731C36.8857 29.6292 36.768 31.3292 36.2587 32.9303C35.7494 34.5315 34.8632 35.9871 33.6747 37.1747L23.1747 47.6747C21.2056 49.6439 18.5349 50.7501 15.7501 50.7501C12.9653 50.7501 10.2945 49.6439 8.3254 47.6747C6.35625 45.7056 5.25 43.0349 5.25 40.2501C5.25 37.4653 6.35625 34.7945 8.3254 32.8254L12.4251 28.7257M43.5751 27.2744L47.6747 23.1747C49.6439 21.2056 50.7501 18.5349 50.7501 15.7501C50.7501 12.9653 49.6439 10.2945 47.6747 8.3254C45.7056 6.35625 43.0349 5.25 40.2501 5.25C37.4653 5.25 34.7945 6.35625 32.8254 8.3254L22.3254 18.8254C21.1369 20.0131 20.2507 21.4686 19.7414 23.0698C19.2321 24.6709 19.1145 26.371 19.3984 28.027C19.6823 29.6831 20.3595 31.2468 21.3731 32.5868C22.3867 33.9269 23.7071 35.0041 25.2234 35.7281"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Button</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M36.7496 14C36.7496 16.3206 35.8277 18.5462 34.1868 20.1872C32.5459 21.8281 30.3203 22.75 27.9996 22.75C25.679 22.75 23.4534 21.8281 21.8124 20.1872C20.1715 18.5462 19.2496 16.3206 19.2496 14C19.2496 11.6794 20.1715 9.45376 21.8124 7.81282C23.4534 6.17187 25.679 5.25 27.9996 5.25C30.3203 5.25 32.5459 6.17187 34.1868 7.81282C35.8277 9.45376 36.7496 11.6794 36.7496 14V14ZM10.502 46.942C10.5769 42.3508 12.4534 37.973 15.7267 34.7528C19 31.5325 23.4078 29.7278 27.9996 29.7278C32.5914 29.7278 36.9992 31.5325 40.2725 34.7528C43.5458 37.973 45.4223 42.3508 45.4973 46.942C40.0079 49.4591 34.0386 50.7582 27.9996 50.75C21.7556 50.75 15.829 49.3873 10.502 46.942Z"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Avatar</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="48" height="38" viewBox="0 0 48 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.25 10.25H46.75M1.25 12H46.75M8.25 24.25H22.25M8.25 29.5H15.25M6.5 36.5H41.5C42.8924 36.5 44.2277 35.9469 45.2123 34.9623C46.1969 33.9777 46.75 32.6424 46.75 31.25V6.75C46.75 5.35761 46.1969 4.02226 45.2123 3.03769C44.2277 2.05312 42.8924 1.5 41.5 1.5H6.5C5.10761 1.5 3.77226 2.05312 2.78769 3.03769C1.80312 4.02226 1.25 5.35761 1.25 6.75V31.25C1.25 32.6424 1.80312 33.9777 2.78769 34.9623C3.77226 35.9469 5.10761 36.5 6.5 36.5Z"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Cards</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7 19.25V42C7 43.3924 7.55312 44.7277 8.53769 45.7123C9.52226 46.6969 10.8576 47.25 12.25 47.25H43.75C45.1424 47.25 46.4777 46.6969 47.4623 45.7123C48.4469 44.7277 49 43.3924 49 42V19.25M7 19.25V14C7 12.6076 7.55312 11.2723 8.53769 10.2877C9.52226 9.30312 10.8576 8.75 12.25 8.75H43.75C45.1424 8.75 46.4777 9.30312 47.4623 10.2877C48.4469 11.2723 49 12.6076 49 14V19.25M7 19.25H49M12.25 14H12.2687V14.0187H12.25V14ZM17.5 14H17.5187V14.0187H17.5V14ZM22.75 14H22.7687V14.0187H22.75V14Z"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Tab</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 29.75L24.5 43.75L45.5 12.25" stroke="white" stroke-width="3" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Validation</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M45.5 33.25V27.125C45.5 25.0364 44.6703 23.0334 43.1935 21.5565C41.7166 20.0797 39.7136 19.25 37.625 19.25H34.125C33.4288 19.25 32.7611 18.9734 32.2688 18.4812C31.7766 17.9889 31.5 17.3212 31.5 16.625V13.125C31.5 11.0364 30.6703 9.03338 29.1935 7.55653C27.7166 6.07969 25.7136 5.25 23.625 5.25H19.25M19.25 35H36.75M19.25 42H28M24.5 5.25H13.125C11.676 5.25 10.5 6.426 10.5 7.875V48.125C10.5 49.574 11.676 50.75 13.125 50.75H42.875C44.324 50.75 45.5 49.574 45.5 48.125V26.25C45.5 20.6805 43.2875 15.339 39.3492 11.4008C35.411 7.46249 30.0695 5.25 24.5 5.25V5.25Z"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Text Flied</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M39.3447 10.4693L45.5 16.6246M42 32.6663V43.7496C42 45.142 41.4469 46.4773 40.4623 47.4619C39.4777 48.4465 38.1424 48.9996 36.75 48.9996H12.25C10.8576 48.9996 9.52226 48.4465 8.53769 47.4619C7.55312 46.4773 7 45.142 7 43.7496V19.2496C7 17.8572 7.55312 16.5219 8.53769 15.5373C9.52226 14.5527 10.8576 13.9996 12.25 13.9996H23.3333M39.3447 10.4693L43.281 6.5306C44.1016 5.71002 45.2145 5.24902 46.375 5.24902C47.5355 5.24902 48.6484 5.71002 49.469 6.5306C50.2896 7.35118 50.7506 8.46413 50.7506 9.6246C50.7506 10.7851 50.2896 11.898 49.469 12.7186L24.6913 37.4963C23.4578 38.7291 21.9365 39.6353 20.265 40.1109L14 41.9996L15.8667 35.7346C16.3643 34.0631 17.2705 32.5418 18.5033 31.3083L39.3447 10.4693V10.4693Z"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Time Picker</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.75 15.75H47.25M8.75 28H47.25M8.75 40.25H47.25" stroke="white" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Menu</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="46" height="42" viewBox="0 0 46 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2 12.25V35C2 36.3924 2.55312 37.7277 3.53769 38.7123C4.52226 39.6969 5.85761 40.25 7.25 40.25H38.75C40.1424 40.25 41.4777 39.6969 42.4623 38.7123C43.4469 37.7277 44 36.3924 44 35V12.25M2 12.25V7C2 5.60761 2.55312 4.27226 3.53769 3.28769C4.52226 2.30312 5.85761 1.75 7.25 1.75H38.75C40.1424 1.75 41.4777 2.30312 42.4623 3.28769C43.4469 4.27226 44 5.60761 44 7V12.25M2 12.25H44M7.25 7H7.26867V7.01867H7.25V7ZM12.5 7H12.5187V7.01867H12.5V7ZM17.75 7H17.7687V7.01867H17.75V7Z"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Tabs</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.25 15.75H47.25M19.25 28H47.25M19.25 40.25H47.25M8.75 15.75H8.76633V15.7687H8.75V15.75ZM9.625 15.75C9.625 15.9821 9.53281 16.2046 9.36872 16.3687C9.20462 16.5328 8.98206 16.625 8.75 16.625C8.51794 16.625 8.29538 16.5328 8.13128 16.3687C7.96719 16.2046 7.875 15.9821 7.875 15.75C7.875 15.5179 7.96719 15.2954 8.13128 15.1313C8.29538 14.9672 8.51794 14.875 8.75 14.875C8.98206 14.875 9.20462 14.9672 9.36872 15.1313C9.53281 15.2954 9.625 15.5179 9.625 15.75ZM8.75 28H8.76633V28.0187H8.75V28ZM9.625 28C9.625 28.2321 9.53281 28.4546 9.36872 28.6187C9.20462 28.7828 8.98206 28.875 8.75 28.875C8.51794 28.875 8.29538 28.7828 8.13128 28.6187C7.96719 28.4546 7.875 28.2321 7.875 28C7.875 27.7679 7.96719 27.5454 8.13128 27.3813C8.29538 27.2172 8.51794 27.125 8.75 27.125C8.98206 27.125 9.20462 27.2172 9.36872 27.3813C9.53281 27.5454 9.625 27.7679 9.625 28V28ZM8.75 40.25H8.76633V40.2687H8.75V40.25ZM9.625 40.25C9.625 40.4821 9.53281 40.7046 9.36872 40.8687C9.20462 41.0328 8.98206 41.125 8.75 41.125C8.51794 41.125 8.29538 41.0328 8.13128 40.8687C7.96719 40.7046 7.875 40.4821 7.875 40.25C7.875 40.0179 7.96719 39.7954 8.13128 39.6313C8.29538 39.4672 8.51794 39.375 8.75 39.375C8.98206 39.375 9.20462 39.4672 9.36872 39.6313C9.53281 39.7954 9.625 40.0179 9.625 40.25Z"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Time Line</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="28" r="3" stroke="white" stroke-width="2" />
<circle cx="28" cy="28" r="3" stroke="white" stroke-width="2" />
<circle cx="40" cy="28" r="3" stroke="white" stroke-width="2" />
</svg>
</div>
<p class="content-title font-600">Pagination</p>
</div>
<div class="component-content">
<div class="component-img pb-15">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M26.7869 8.16426C26.8855 7.92354 27.0536 7.71761 27.2697 7.57267C27.4857 7.42773 27.74 7.35034 28.0002 7.35034C28.2604 7.35034 28.5146 7.42773 28.7307 7.57267C28.9468 7.71761 29.1148 7.92354 29.2135 8.16426L34.1719 20.0899C34.2647 20.3131 34.4172 20.5063 34.6128 20.6483C34.8083 20.7904 35.0393 20.8757 35.2802 20.8949L48.1555 21.9263C49.3199 22.0196 49.7912 23.4733 48.9045 24.2316L39.0952 32.6363C38.9119 32.793 38.7753 32.9972 38.7004 33.2265C38.6255 33.4557 38.6152 33.7012 38.6705 33.9359L41.6689 46.5009C41.7291 46.753 41.7133 47.0173 41.6235 47.2604C41.5336 47.5035 41.3737 47.7146 41.164 47.8669C40.9543 48.0192 40.7041 48.1059 40.4451 48.1161C40.1861 48.1263 39.9299 48.0596 39.7089 47.9243L28.6839 41.1926C28.4779 41.0671 28.2414 41.0007 28.0002 41.0007C27.759 41.0007 27.5225 41.0671 27.3165 41.1926L16.2915 47.9266C16.0705 48.0619 15.8142 48.1287 15.5553 48.1185C15.2963 48.1083 15.0461 48.0215 14.8364 47.8692C14.6267 47.7169 14.4668 47.5059 14.3769 47.2628C14.2871 47.0196 14.2713 46.7554 14.3315 46.5033L17.3299 33.9359C17.3855 33.7012 17.3752 33.4557 17.3003 33.2264C17.2254 32.9971 17.0887 32.7929 16.9052 32.6363L7.09586 24.2316C6.89942 24.0627 6.75731 23.8395 6.6874 23.59C6.6135 23.3406 6.62291 23.076 6.70296 22.8296C6.78301 22.5832 6.93413 22.366 7.13731 22.2053C7.34049 22.0445 7.58666 21.9475 7.84486 21.9263L20.7202 20.8949C20.9611 20.8757 21.192 20.7904 21.3876 20.6483C21.5831 20.5063 21.7357 20.3131 21.8285 20.0899L26.7869 8.1666V8.16426Z"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="content-title font-600">Rating</p>
</div>
<div class="component-content">