Social Proof
- Default example
- Cards with statistics
- Illustration with statistics
- Heading with statistics
- Carousel slider
- Statistics with icons and CTA
Get started with this website section to offer social proof to your website visitors by providing statistical numbers about your product's usage worldwide.
Default example
Use this example of statistical numbers that you can use to showcase the adoption rate of your product by the community.
Default example
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto text-center lg:py-16 lg:px-6">
<dl
class="grid max-w-screen-md gap-8 mx-auto text-gray-900 sm:grid-cols-3 dark:text-white"
>
<div class="flex flex-col items-center justify-center">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">73M+</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">developers</dd>
</div>
<div class="flex flex-col items-center justify-center">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">1B+</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
contributors
</dd>
</div>
<div class="flex flex-col items-center justify-center">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">4M+</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
organizations
</dd>
</div>
</dl>
</div>
</section>
<!-- Block end -->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
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
Cards with statistics
Use this example to show statistics inside cards as social proof with a secondary helper description text.
Cards with statistics
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="px-4 py-8 mx-auto max-w-screen-xl sm:py-16 lg:px-6 xl:px-0">
<div class="mx-auto mb-8 max-w-screen-md text-center md:mb-16">
<h2
class="text-3xl tracking-tight font-extrabold text-gray-900 md:text-4xl dark:text-white"
>
Transformation by the numbers
</h2>
</div>
<div
class="mb-4 space-y-4 md:grid md:grid-cols-3 md:gap-4 xl:gap-16 md:space-y-0 md:mb-8"
>
<div
class="flex justify-center items-center p-6 text-center bg-gray-100 rounded xl:p-12 dark:bg-gray-800"
>
<div class="text-gray-900 dark:text-white">
<p class="mb-2 text-4xl font-extrabold md:text-5xl">40%</p>
<h3 class="mb-2 text-xl font-semibold">Reduction</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
in developer onboarding time
<span class="font-medium text-primary-600 dark:text-primary-500"
>*</span
>
</p>
</div>
</div>
<div
class="flex justify-center items-center p-6 text-center bg-gray-100 rounded xl:p-12 dark:bg-gray-800"
>
<div class="text-gray-900 dark:text-white">
<p class="mb-2 text-4xl font-extrabold md:text-5xl">469%</p>
<h3 class="mb-2 text-xl font-semibold">Return on investment</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
over 3 years
<span class="font-medium text-primary-600 dark:text-primary-500"
>*</span
>
</p>
</div>
</div>
<div
class="flex justify-center items-center p-6 text-center bg-gray-100 rounded xl:p-12 dark:bg-gray-800"
>
<div class="text-gray-900 dark:text-white">
<p class="mb-2 text-4xl font-extrabold md:text-5xl">60+</p>
<h3 class="mb-2 text-xl font-semibold">Minutes saved</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
per developer, per day
<span class="font-medium text-primary-600 dark:text-primary-500"
>*</span
>
</p>
</div>
</div>
</div>
<p class="text-sm font-light text-center text-gray-500 dark:text-gray-400">
<span class="font-medium text-primary-600 dark:text-primary-500">*</span>
Results based on a composite organization of 1,800 developers using GitHub
over three years.
</p>
</div>
</section>
<!-- Block end -->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
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
Illustration with statistics
Showcase a visual illustration next to the statistical numbers that provide social proof to the visitors browsing your website.
Illustration with statistics
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 xl:gap-16 lg:py-16 lg:px-6"
>
<div class="text-gray-500 sm:text-lg">
<h2
class="mb-4 text-3xl tracking-tight font-extrabold text-gray-900 md:text-4xl dark:text-white"
>
Stats that matter
</h2>
<p class="mb-8 font-light lg:text-xl dark:text-gray-400">
Our rigorous security and compliance standards are at the heart of all
we do. We work tirelessly to protect you and your customers.
</p>
<div
class="grid gap-6 lg:grid-cols-1 dark:border-gray-700 sm:grid-cols-2"
>
<div class="flex">
<div class="mr-4 shrink-0">
<svg
class="w-8 h-8 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<p
class="mb-1 text-2xl font-extrabold tracking-tight text-gray-900 dark:text-white"
>
$76 billion
</p>
<p class="font-light text-gray-500 dark:text-gray-400">
24h trading volume on Flowbite exchange
</p>
</div>
</div>
<div class="flex">
<div class="mr-4 shrink-0">
<svg
class="w-8 h-8 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<p
class="mb-1 text-2xl font-extrabold tracking-tight text-gray-900 dark:text-white"
>
90%
</p>
<p class="font-light text-gray-500 dark:text-gray-400">
of U.S adults have bought from businesses using Flowbite
</p>
</div>
</div>
<div class="flex">
<div class="mr-4 shrink-0">
<svg
class="w-8 h-8 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<p
class="mb-1 text-2xl font-extrabold tracking-tight text-gray-900 dark:text-white"
>
135+
</p>
<p class="font-light text-gray-500 dark:text-gray-400">
currencies and payment methods supported
</p>
</div>
</div>
<div class="flex">
<div class="mr-4 shrink-0">
<svg
class="w-8 h-8 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<p
class="mb-1 text-2xl font-extrabold tracking-tight text-gray-900 dark:text-white"
>
40%
</p>
<p class="font-light text-gray-500 dark:text-gray-400">
countries with local acquiring optimizing acceptance rates
</p>
</div>
</div>
</div>
</div>
<!-- Illustration -->
<img
class="hidden mx-auto mb-4 sm:flex"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/social-proof/table-professor.svg"
alt="table professor illustration"
/>
</div>
</section>
<!-- Block end -->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
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
Heading with statistics
Use this section to show a heading with a description complementary to the statistical information that you can use up to four items per row.
Heading with statistics
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl py-8 lg:py-16 px-4 mx-auto lg:px-6">
<h2
class="mb-4 text-3xl tracking-tight font-extraboldtext-gray-900 sm:text-4xl dark:text-white"
>
Sign up for our newsletter
</h2>
<p class="max-w-2xl font-light text-gray-500 sm:text-xl dark:text-gray-400">
Stay up to date with the roadmap progress, announcements and exclusive
discounts feel free to sign up with your email.
</p>
<dl
class="grid gap-8 mt-8 text-gray-900 sm:grid-cols-2 lg:gap-20 lg:mt-14 lg:grid-cols-4 dark:text-white"
>
<div class="flex flex-col">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold tracking-tight">
$76 bilion
</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
24h trading volume on Flowbite exchange
</dd>
</div>
<div class="flex flex-col">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">600+</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
Cryptocurrencies listed on our platform
</dd>
</div>
<div class="flex flex-col">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold">90 milion</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
Registered users who trust Flowbite
</dd>
</div>
<div class="flex flex-col">
<dt class="mb-2 text-3xl md:text-4xl font-extrabold"><0.10%< /dt></dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
Lowest transaction fees
</dd>
</div>
</dl>
</div>
</section>
<!-- Block end -->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
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
Carousel slider
Use this carousel slider component from the Flowbite library next to the statistical numbers below to provide a visual impact.
Carousel slider
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900 lg:py-16 py-8">
<div class="px-4 mx-auto mb-8 max-w-screen-md text-center md:mb-16 lg:px-0">
<h2
class="mb-4 text-3xl tracking-tight font-extrabold text-gray-900 md:text-4xl dark:text-white"
>
Unwavering in our commitment to trust
</h2>
<div>
<a
href="#"
class="inline-flex justify-center items-center text-base font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Learn more about us
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
<div class="mx-auto max-w-screen-xl">
<div
id="animation-carousel"
class="relative px-16 sm:px-24"
data-carousel="slide"
>
<div
class="overflow-hidden relative h-48 rounded-lg sm:h-64 xl:h-80 2xl:h-80"
>
<div
class="grid hidden absolute inset-0 gap-8 transition-all duration-700 ease-linear transform lg:grid-cols-2"
data-carousel-item=""
>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/social-proof/carousel-slider/office-work.png"
class="block w-full h-full rounded-lg"
alt="..."
/>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/social-proof/carousel-slider/office.png"
class="hidden w-full h-full rounded-lg lg:block"
alt="..."
/>
</div>
<div
class="grid hidden absolute inset-0 gap-8 transition-all duration-700 ease-linear transform lg:grid-cols-2"
data-carousel-item=""
>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/social-proof/carousel-slider/conference.png"
class="block w-full h-full rounded-lg"
alt="..."
/>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/social-proof/carousel-slider/girl-with-phone.png"
class="hidden w-full h-full rounded-lg lg:block"
alt="..."
/>
</div>
<div
class="grid hidden absolute inset-0 gap-8 transition-all duration-700 ease-linear transform lg:grid-cols-2"
data-carousel-item=""
>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/social-proof/carousel-slider/man-at-office.png"
class="block w-full h-full rounded-lg"
alt="..."
/>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/social-proof/carousel-slider/meeting.png"
class="hidden w-full h-full rounded-lg lg:block"
alt="..."
/>
</div>
<div
class="grid hidden absolute inset-0 gap-8 transition-all duration-700 ease-linear transform lg:grid-cols-2"
data-carousel-item=""
>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/social-proof/carousel-slider/work-from-home.png"
class="block w-full h-full rounded-lg"
alt="..."
/>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/social-proof/carousel-slider/workspace.png"
class="hidden w-full h-full rounded-lg lg:block"
alt="..."
/>
</div>
</div>
<button
type="button"
class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
data-carousel-prev=""
>
<span
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-white/30 bg-gray-800/30 dark:group-hover:bg-white/50 group-hover:bg-gray-800/60 group-focus:ring-4 dark:group-focus:ring-white group-focus:ring-gray-800/70 group-focus:outline-none"
>
<svg
class="w-5 h-5 text-white sm:w-6 sm:h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
<span class="hidden">Previous</span>
</span>
</button>
<button
type="button"
class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
data-carousel-next=""
>
<span
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-white/30 bg-gray-800/30 dark:group-hover:bg-white/50 group-hover:bg-gray-800/60 group-focus:ring-4 dark:group-focus:ring-white group-focus:ring-gray-800/70 group-focus:outline-none"
>
<svg
class="w-5 h-5 text-white sm:w-6 sm:h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
<span class="hidden">Next</span>
</span>
</button>
</div>
</div>
<dl
class="grid grid-cols-2 gap-8 mx-auto mt-8 max-w-screen-xl text-gray-900 lg:mt-14 sm:grid-cols-3 xl:grid-cols-6 dark:text-white"
>
<div class="flex flex-col justify-center items-center">
<dt class="mb-2 text-3xl font-extrabold md:text-4xl">73M+</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">Developers</dd>
</div>
<div class="flex flex-col justify-center items-center">
<dt class="mb-2 text-3xl font-extrabold md:text-4xl">100M+</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
Public repositories
</dd>
</div>
<div class="flex flex-col justify-center items-center">
<dt class="mb-2 text-3xl font-extrabold md:text-4xl">1000s</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
Open source projects
</dd>
</div>
<div class="flex flex-col justify-center items-center">
<dt class="mb-2 text-3xl font-extrabold md:text-4xl">1B+</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">Contributors</dd>
</div>
<div class="flex flex-col justify-center items-center">
<dt class="mb-2 text-3xl font-extrabold md:text-4xl">90+</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">
Top Forbes companies
</dd>
</div>
<div class="flex flex-col justify-center items-center">
<dt class="mb-2 text-3xl font-extrabold md:text-4xl">4M+</dt>
<dd class="font-light text-gray-500 dark:text-gray-400">Organizations</dd>
</div>
</dl>
</section>
<!-- Block end -->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
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
Statistics with icons and CTA
Get started with this advanced example where you show icons with the statistical numbers and CTAs below the heading element.
Statistics with icons and CTA
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-4 lg:gap-16 xl:gap-24 lg:py-16 lg:px-6"
>
<div class="col-span-2 mb-8">
<p class="text-lg font-medium text-primary-600 dark:text-primary-500">
Trusted Worldwide
</p>
<h2
class="mt-3 mb-4 text-3xl tracking-tight font-extrabold tracking-tight text-gray-900 md:text-4xl dark:text-white"
>
Trusted by over 600 million users and 10,000 teams
</h2>
<p class="font-light text-gray-500 sm:text-xl dark:text-gray-400">
Our rigorous security and compliance standards are at the heart of all
we do. We work tirelessly to protect you and your customers.
</p>
<div
class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700"
>
<div>
<a
href="#"
class="inline-flex items-center text-base font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Explore Legality Guide
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div>
<a
href="#"
class="inline-flex items-center text-base font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Visit the Trust Center
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
<div
class="col-span-2 space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0"
>
<div>
<svg
class="mb-2 w-10 h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 11-2 0 1 1 0 012 0zM2 13a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2zm14 1a1 1 0 11-2 0 1 1 0 012 0z"
clip-rule="evenodd"
></path>
</svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">99.99% uptime</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
For Flowbite, with zero maintenance downtime
</p>
</div>
<div>
<svg
class="mb-2 w-10 h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
></path>
</svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">600M+ Users</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Trusted by over 600 milion users around the world
</p>
</div>
<div>
<svg
class="mb-2 w-10 h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z"
clip-rule="evenodd"
></path>
</svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">100+ countries</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Have used Flowbite to create functional websites
</p>
</div>
<div>
<svg
class="mb-2 w-10 h-10 text-primary-600 md:w-12 md:h-12 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
></path>
</svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">5+ Million</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Transactions per day
</p>
</div>
</div>
</div>
</section>
<!-- Block end -->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
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