Added simple rendered result

README.md

@@ -27,6 +27,7 @@ This card comes with:
 ![img](Images/img-01.png)
 ![img](Images/img-02.png)
 ![img](Images/img-03.png)
+![img](Images/img-04.png)
 
 
 
@@ -73,6 +74,14 @@ Clean, ready-to-use HTML that you can drop anywhere:
 
 
 
+
+Rendered result:
+
+![img](Images/img-01.png)
+
+
+
+
 ## My Personal Motivation
 
 ✨ **I set out to bring boring, lifeless links in Markdown to life!** ✨

tmp.md

@@ -0,0 +1,24 @@
+<!-- Markdown Crash Course - Beginner Tutorial -->
+<div style="border: 1px solid #ddd; padding: 10px; max-width: 300px; position: relative; display: inline-block;">
+	<a href="https://youtu.be/34_dRW42kYI" target="_blank" style="display: block; position: relative;">
+		<!--  Thumbnail -->
+		<img src="https://i.ytimg.com/vi/34_dRW42kYI/sddefault.jpg" alt="YouTube Thumbnail" style="width: 100%; display: block;">
+		<!-- Play button in the center -->
+		<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(255, 0, 0, 0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
+			<div style="width: 0; height: 0; border-left: 15px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent;"></div>
+		</div>
+		<!-- Black rectangle with duration at bottom-right -->
+		<div style="position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, 0.8); color: white; padding: 2px 6px; font-size: 12px; border-radius: 3px;">
+			21:24
+		</div>
+	</a>
+	<div style="margin: 0 auto; width: 90%; text-align: left;">
+		<!-- Text of URL -->
+		<p style="margin: 10px 0;"><a href="https://youtu.be/34_dRW42kYI" target="_blank">https://youtu.be/34_dRW42kYI</a></p>
+		<!-- Separation line -->
+		<hr style="border: 0; height: 1px; background: #ddd; margin: 10px 0;">
+		<!-- Text of Title -->
+		<p style="margin: 10px 0;"><a href="https://youtu.be/34_dRW42kYI" target="_blank">Markdown Crash Course - Beginner Tutorial</a></p>
+	</div>
+</div>
+