Newsletter Sections
- Default newsletter
- Email sign-up card
- Banner with email sign-up
- Popup with email sign-up
- Modal with email sign-up
The newsletter component is an important marketing method that you can use to convince website visitors to sign up for additional news from your organization.
Default newsletter
Use this example as a website section to allow website visitors to sign up for your newsletter program featuring an input field and privacy notice.
Default newsletter
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md sm:text-center">
<h2
class="mb-4 text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl dark:text-white"
>
Sign up for our newsletter
</h2>
<p
class="mx-auto mb-8 max-w-2xl font-light text-gray-500 md:mb-12 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>
<form action="#">
<div
class="items-center mx-auto mb-3 space-y-4 max-w-screen-sm sm:flex sm:space-y-0"
>
<div class="relative w-full">
<label
for="email"
class="hidden mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Email address</label
>
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
></path>
<path
d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
></path>
</svg>
</div>
<input
class="block p-3 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:rounded-none sm:rounded-l-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Enter your email"
type="email"
id="email"
required=""
/>
</div>
<div>
<button
type="submit"
class="py-3 px-5 w-full text-sm font-medium text-center text-white rounded-lg border cursor-pointer bg-primary-700 border-primary-600 sm:rounded-none sm:rounded-r-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Subscribe
</button>
</div>
</div>
<div
class="mx-auto max-w-screen-sm text-sm text-left text-gray-500 newsletter-form-footer dark:text-gray-300"
>
We care about the protection of your data.
<a
href="#"
class="font-medium text-primary-600 dark:text-primary-500 hover:underline"
>Read our Privacy Policy</a
>.
</div>
</form>
</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
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
Email sign-up card
Use this example of an email sign-up input element inside a card component with a privacy notice to convince users to subscribe to your newsletter.
Email sign-up card
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div
class="gap-16 justify-between items-center p-6 text-white bg-gray-900 rounded-lg dark:bg-gray-800 lg:flex lg:gap-24 md:p-12"
>
<div class="w-full">
<h2 class="mb-4 text-3xl tracking-tight font-extrabold sm:text-4xl">
Sign up for our newsletter
</h2>
<p class="font-light text-gray-400 sm:text-xl">
Stay up to date with the roadmap progress, announcements and exclusive
discounts feel free to sign up with your email.
</p>
</div>
<div class="mt-6 w-full lg:mt-0">
<form action="#">
<div class="items-center mb-3 space-y-4 sm:flex sm:space-y-0">
<div class="relative w-full">
<label
for="member_email"
class="hidden mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Email address</label
>
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
></path>
<path
d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
></path>
</svg>
</div>
<input
class="block p-3 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:rounded-none sm:rounded-l-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Enter your email"
type="email"
required=""
/>
</div>
<div>
<button
type="submit"
class="py-3 px-5 w-full text-sm font-medium text-center text-white rounded-lg border cursor-pointer bg-primary-600 border-primary-600 hover:border-primary-700 sm:rounded-none sm:rounded-r-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Subscribe
</button>
</div>
</div>
<div class="text-sm text-left text-gray-400 dark:text-gray-300">
We care about the protection of your data.
<a href="#" class="font-medium text-white hover:underline"
>Read our Privacy Policy</a
>.
</div>
</form>
</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
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
Banner with email sign-up
Show a dismissable banner component to enable a website visitor to sign up to your newsletter without affecting the main content area of the page.
Banner with email sign-up
html
<!-- Block start -->
<div
id="banner"
tabindex="-1"
class="fixed z-50 flex items-start w-full px-4 py-3 border border-b border-gray-200 sm:justify-between bg-white dark:border-gray-700 dark:bg-gray-800"
>
<div class="items-center justify-center w-full sm:flex">
<p class="mb-4 font-medium text-gray-500 sm:mb-0 dark:text-white md:mb-0">
Subscribe to get updates!
</p>
<form action="#" class="sm:pl-10">
<div class="flex items-center md:mx-auto sm:space-y-0">
<div class="relative w-full mr-3">
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
>Email address</label
>
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
></path>
<path
d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
></path>
</svg>
</div>
<input
class="block w-full p-3 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 md:w-64 lg:w-96 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Your email"
type="email"
id="email"
required=""
/>
</div>
<div>
<button
type="submit"
class="w-full px-5 py-3 text-sm font-medium text-center text-white rounded-lg cursor-pointer bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Subscribe
</button>
</div>
</div>
</form>
</div>
<button
data-collapse-toggle="banner"
type="button"
class="absolute top-1 right-1 sm:relative inline-flex justify-center items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<!-- Block end -->
<script>
const bannerEl = document.getElementById('newsletter-banner')
const banner = new Modal(bannerEl, {
placement: 'top-left',
})
banner.show()
const closeBannerEl = document.getElementById('close-banner')
closeBannerEl.addEventListener('click', function () {
banner.hide()
})
</script>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
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
Popup with email sign-up
Show this bottom-right positioned popup component to allow users to sign up to your newsletter without affecting the main content area of the page.
Popup with email sign-up
html
<!-- Block start -->
<div
id="sign-up-pop-up"
tabindex="-1"
class="fixed right-0 z-50 max-w-md p-4 mx-4 bg-white border border-gray-200 rounded-lg shadow bottom-4 md:mx-0 md:right-6 sm:bottom-6 dark:bg-gray-800 md:p-6 dark:border-gray-700"
>
<button
type="button"
class="text-gray-400 absolute top-3 right-3 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-collapse-toggle="sign-up-pop-up"
id="close-modal"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
<div>
<h3
class="mb-2 text-xl font-semibold tracking-tight text-gray-900 dark:text-white"
>
Join our Newsletter
</h3>
<p class="mb-4 text-base leading-relaxed text-gray-500 dark:text-gray-400">
Get started with our monthly newsletter for helpful tips on how to run
your business smoothly.
</p>
<form action="#">
<div
class="items-center max-w-screen-sm mx-auto space-y-4 sm:flex sm:space-y-0"
>
<div class="relative w-full mr-3">
<label
for="email"
class="hidden mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
>Email address</label
>
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
></path>
<path
d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
></path>
</svg>
</div>
<input
class="block w-full p-3 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Your email"
type="email"
id="email"
required=""
/>
</div>
<div>
<button
type="submit"
class="w-full px-5 py-3 text-sm font-medium text-center text-white rounded-lg cursor-pointer bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Subscribe
</button>
</div>
</div>
</form>
</div>
</div>
<!-- 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
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
Modal with email sign-up
Use this example of a modal component with an email sign-up element inside and show it when the website visitors have read an article or scrolled to the bottom of the page.
Modal with email sign-up
html
<!-- Block start -->
<div
id="newsletter-modal"
tabindex="-1"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full"
>
<div class="relative p-4 w-full max-w-2xl h-full rounded-lg md:h-auto">
<!-- Modal content -->
<div
class="flex relative items-center bg-white rounded-lg shadow dark:bg-gray-800"
>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/newsletter/people-at-office.png"
class="hidden rounded-l-lg md:flex h-64"
alt="office"
/>
<div>
<button
type="button"
class="text-gray-400 absolute top-3 right-3 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
id="close-modal"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
<!-- Modal body -->
<div class="p-6 pt-4">
<h3
class="mb-2 text-xl font-semibold tracking-tight text-gray-900 dark:text-white"
>
Join our Newsletter
</h3>
<p
class="mb-4 text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
Get started with our monthly newsletter for helpful tips on how to
run your business smoothly.
</p>
<form action="#">
<div
class="items-center mx-auto space-y-4 max-w-screen-sm sm:flex sm:space-y-0"
>
<div class="relative mr-3 w-full">
<label
for="email"
class="hidden mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
>Email address</label
>
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
></path>
<path
d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
></path>
</svg>
</div>
<input
class="block p-3 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Your email"
type="email"
id="email"
required=""
/>
</div>
<div>
<button
type="submit"
class="py-3 px-5 w-full text-sm font-medium text-center text-white rounded-lg cursor-pointer bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Subscribe
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Block end -->
<script>
const modalEl = document.getElementById('newsletter-modal')
const newsletterModal = new Modal(modalEl, {
placement: 'center',
})
newsletterModal.show()
const closeModalEl = document.getElementById('close-modal')
closeModalEl.addEventListener('click', function () {
newsletterModal.hide()
})
</script>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
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