Skip to content

Commit 4093b72

Browse files
ascensus-mdbascensus-mdb
committed
Add links to generators
1 parent b489aa3 commit 4093b72

File tree

5 files changed

+108
-36
lines changed

5 files changed

+108
-36
lines changed

‎site/content/learn/te-foundations/2-tailwindcss/13-icons/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -430,5 +430,20 @@ <h2 class="mb-6">
430430
d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z" />
431431
</svg>
432432
</div>
433+
434+
<!-- TE note primary -->
435+
<div
436+
class="mb-8 rounded-lg border-l-4 border-primary-400 border-opacity-50 bg-primary-100 p-4 dark:bg-primary-700">
437+
<p class="">
438+
<strong>Note: </strong>You can also try our
439+
<a
440+
href="https://www.designtoolshub.com/tailwind-css/icon-generator"
441+
class="font-bold text-blue-600 hover:text-blue-700"
442+
target="_blank"
443+
>SVG icon generator</a
444+
>
445+
with font awesome prepared icons already with Tailwind CSS classes.
446+
</p>
447+
</div>
433448
</section>
434449
<!-- Section: Text -->

‎site/content/learn/te-foundations/2-tailwindcss/21-text/index.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -438,11 +438,25 @@ <h2 class="text-2xl font-medium">
438438
<!-- TE image -->
439439
<img src="./assets/text-5.jpg" class="mb-8 w-full rounded-lg" alt="" />
440440

441-
<p class="mb-3">
441+
<p class="mb-6">
442442
Now <strong>Call to action</strong> looks much better, but there is still a
443443
lot of work ahead of us.
444444
</p>
445445

446+
<!-- TE note primary -->
447+
<div
448+
class="mb-8 rounded-lg border-l-4 border-primary-400 border-opacity-50 bg-primary-100 p-4 dark:bg-primary-700">
449+
<p class="">
450+
<strong>Note: </strong>You can also try our
451+
<a
452+
href="https://www.designtoolshub.com/tailwind-css/typography-generator"
453+
class="font-bold text-blue-600 hover:text-blue-700"
454+
target="_blank"
455+
>Typography generator</a
456+
>.
457+
</p>
458+
</div>
459+
446460
<!-- TE demo & source code -->
447461
<hr
448462
class="my-12 h-0.5 border-t-0 bg-neutral-100 opacity-100 dark:opacity-50" />

‎site/content/learn/te-foundations/2-tailwindcss/26-buttons/index.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -685,7 +685,7 @@ <h2 class="mb-7 text-2xl font-medium">
685685
<!-- TE image -->
686686
<img src="./assets/btn-1.jpg" class="mb-8 w-full rounded-lg" alt="" />
687687

688-
<p>
688+
<p class="mb-6">
689689
Remember that if something doesn't work as it should or is not clear to you,
690690
you can always
691691
<a
@@ -698,6 +698,20 @@ <h2 class="mb-7 text-2xl font-medium">
698698
😉
699699
</p>
700700

701+
<!-- TE note primary -->
702+
<div
703+
class="mb-8 rounded-lg border-l-4 border-primary-400 border-opacity-50 bg-primary-100 p-4 dark:bg-primary-700">
704+
<p class="">
705+
<strong>Note: </strong>You can also try our
706+
<a
707+
href="https://www.designtoolshub.com/tailwind-css/button-generator"
708+
class="font-bold text-blue-600 hover:text-blue-700"
709+
target="_blank"
710+
>Button generator</a
711+
>.
712+
</p>
713+
</div>
714+
701715
<!-- TE demo & source code -->
702716
<hr
703717
class="my-12 h-0.5 border-t-0 bg-neutral-100 opacity-100 dark:opacity-50" />

‎site/content/learn/te-foundations/2-tailwindcss/32-cards/index.html‎

Lines changed: 49 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
draft: false
77

88
seo_title: "Tailwind CSS cards tutorial"
9-
description: "Learn Tailwind CSS Cards - flexible content containers with extensible options for headers, footers, images, and a wide variety of content"
9+
description: "Learn Tailwind CSS Cards - flexible content containers with extensible options for headers, footers,
10+
images, and a wide variety of content"
1011
image: "https://tw-elements.com/learn/te-foundations/basics/introduction/assets/tailwind-elements.png"
1112
video: ""
1213
layout: tutorial
@@ -110,17 +111,17 @@ <h2 class="mb-6 mt-12 text-xl font-semibold">Basic example</h2>
110111
<!-- TE code javascript -->
111112
<div class="mb-8">
112113
<!-- prettier-ignore -->
113-
{{< twsnippet/wrapper "JavaScript" "" "mobile" >}}{{< twsnippet/code active=true lang="js" >}}
114-
115-
// Initialization for ES Users
116-
import {
117-
Ripple,
118-
initTE,
119-
} from "tw-elements";
120-
121-
initTE({ Ripple });
122-
123-
{{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
114+
{{< twsnippet/wrapper "JavaScript" "" "mobile">}}{{< twsnippet/code active=true lang="js">}}
115+
116+
// Initialization for ES Users
117+
import {
118+
Ripple,
119+
initTE,
120+
} from "tw-elements";
121+
122+
initTE({ Ripple });
123+
124+
{{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
124125
</div>
125126

126127
<!-- TE tutorial step-->
@@ -203,17 +204,17 @@ <h2 class="mb-6 mt-12 text-xl font-semibold">Card with an image</h2>
203204
<!-- TE code javascript -->
204205
<div class="mb-8">
205206
<!-- prettier-ignore -->
206-
{{< twsnippet/wrapper "JavaScript" "" "mobile" >}}{{< twsnippet/code active=true lang="js" >}}
207-
208-
// Initialization for ES Users
209-
import {
210-
Ripple,
211-
initTE,
212-
} from "tw-elements";
213-
214-
initTE({ Ripple });
215-
216-
{{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
207+
{{< twsnippet/wrapper "JavaScript" "" "mobile">}}{{< twsnippet/code active=true lang="js">}}
208+
209+
// Initialization for ES Users
210+
import {
211+
Ripple,
212+
initTE,
213+
} from "tw-elements";
214+
215+
initTE({ Ripple });
216+
217+
{{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
217218
</div>
218219

219220
<!-- TE tutorial step-->
@@ -294,17 +295,17 @@ <h2 class="mb-6 mt-12 text-xl font-semibold">Image with ripple</h2>
294295
<!-- TE code javascript -->
295296
<div class="mb-8">
296297
<!-- prettier-ignore -->
297-
{{< twsnippet/wrapper "JavaScript" "" "mobile" >}}{{< twsnippet/code active=true lang="js" >}}
298-
299-
// Initialization for ES Users
300-
import {
301-
Ripple,
302-
initTE,
303-
} from "tw-elements";
304-
305-
initTE({ Ripple });
306-
307-
{{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
298+
{{< twsnippet/wrapper "JavaScript" "" "mobile">}}{{< twsnippet/code active=true lang="js">}}
299+
300+
// Initialization for ES Users
301+
import {
302+
Ripple,
303+
initTE,
304+
} from "tw-elements";
305+
306+
initTE({ Ripple });
307+
308+
{{< /twsnippet/code >}}{{< /twsnippet/wrapper >}}
308309
</div>
309310

310311
<!-- TE tutorial step-->
@@ -381,5 +382,19 @@ <h5 class="card-title">Special title treatment</h5>
381382
>.
382383
</p>
383384
</div>
385+
386+
<!-- TE note primary -->
387+
<div
388+
class="mb-8 rounded-lg border-l-4 border-primary-400 border-opacity-50 bg-primary-100 p-4 dark:bg-primary-700">
389+
<p class="">
390+
<strong>Note 2: </strong>You can also try our
391+
<a
392+
href="https://www.designtoolshub.com/tailwind-css/card-generator"
393+
class="font-bold text-blue-600 hover:text-blue-700"
394+
target="_blank"
395+
>Card generator</a
396+
>.
397+
</p>
398+
</div>
384399
</section>
385400
<!-- Section: Text -->

‎site/content/learn/te-foundations/2-tailwindcss/40-footer/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1038,6 +1038,20 @@ <h2 class="mb-6 mt-12 text-xl font-semibold">
10381038
<!-- TE image -->
10391039
<img src="./assets/footer-1.jpg" class="mb-8 w-full rounded-lg" alt="" />
10401040

1041+
<!-- TE note primary -->
1042+
<div
1043+
class="mb-8 rounded-lg border-l-4 border-primary-400 border-opacity-50 bg-primary-100 p-4 dark:bg-primary-700">
1044+
<p class="">
1045+
<strong>Note: </strong>You can also try our
1046+
<a
1047+
href="https://www.designtoolshub.com/tailwind-css/footer-generator"
1048+
class="font-bold text-blue-600 hover:text-blue-700"
1049+
target="_blank"
1050+
>Footer generator</a
1051+
>.
1052+
</p>
1053+
</div>
1054+
10411055
<!-- TE demo & source code -->
10421056
<hr
10431057
class="my-12 h-0.5 border-t-0 bg-neutral-100 opacity-100 dark:opacity-50" />

0 commit comments

Comments
 (0)