JSFiddle - React, Tailwind, and code Playground

by Angelica

HTML

<!-- Sticker Sheet Club Header
Don't forget to add the CSS code into your HEAD tags or your page's stylesheet -->
<table id="ssclubheader_1" style="background-image:url('https://stickersheetclub.neocities.org/images/stickersheetheader.png'); background-repeat: no-repeat; background-position: top center;" height="80">
<tr>
<th>
<!-- Fancy Text Generator 
https://lingojam.com/FancyTextGenerator -->
<div style="font-family: Verdana; font-size: 12px; color: #e55a76;"><img src="https://stickersheetclub.neocities.org/images/tinyleaf.gif"> ๐‘€๐“Ž ๐’ฎ๐“‰๐’พ๐’ธ๐“€๐‘’๐“‡ ๐’ฎ๐’ฝ๐‘’๐‘’๐“‰ <img src="https://stickersheetclub.neocities.org/images/tinyleaf.gif"></div>
</th>
</tr>
</table>
<!-- Sticker Sheet Club Stickers Go Here -->
<table id="ssclubstickers_1" class="stickersimg" height="100" >
<tr>
<td><center> <a href="http://stickersheetclub.neocities.org/"><img src="https://stickersheetclub.neocities.org/images/sticker_placeholder1.png"></a> <a href="http://stickersheetclub.neocities.org/"><img src="https://stickersheetclub.neocities.org/images/sticker_placeholder2.png"></a> <a href="http://stickersheetclub.neocities.org/"><img src="https://stickersheetclub.neocities.org/images/sticker_placeholder1.png"></a>  </center></td>
</tr>
<tr>
<td><center> <a href="http://stickersheetclub.neocities.org/"><img src="https://stickersheetclub.neocities.org/images/sticker_placeholder2.png"></a> <a href="http://stickersheetclub.neocities.org/"><img src="https://stickersheetclub.neocities.org/images/sticker_placeholder1.png"></a> <a href="http://stickersheetclub.neocities.org/"><img src="https://stickersheetclub.neocities.org/images/sticker_placeholder2.png"></a>  </center></td>
</tr>
<tr>
<td><center> <a href="http://stickersheetclub.neocities.org/"><img src="https://stickersheetclub.neocities.org/images/sticker_placeholder1.png"></a> <a href="http://stickersheetclub.neocities.org/"><img src="https://stickersheetclub.neocities.org/images/sticker_placeholder2.png"></a> <a...

CSS

/* Sticker Sheet Club Styling
    http://www.stickersheetclub.neocities.org 
    */
    
    /* Table Styling */
    table {
      background-color: #fdc2ce; 
      border: 1px solid #fdc2ce;
      width: 250px;
    }
		/* Space between the stickers */
		td img {
      padding:0px 15px;
		}
	
    /* Black shadow around stickers
    You can change or remove this if you want */
		.stickersimg img {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
		}
			
    /* To customize mulitple sets of tables:
    Each sticker sheet has 3 tables: ssclubheader_#, ssclubstickers_#, and #ssclubfooter_#. 
    Give each set of tables a different number.
    */
	    
    #ssclubheader_1 {
    /* You can use the background header image code here and remove it from the HTML.
     background-image:url('https://stickersheetclub.neocities.org/images/stickersheetheader.png'); 
    background-repeat: no-repeat; 
    background-position: top center;
    */
    }
			
  	#ssclubstickers_1 {
    /* You can add a different background color or image here too! */
    background-image:url('https://angelicas.site/images/grafx/bgs/butterflies%20(19).png'); 
    background-repeat: no-repeat; 
    background-position: top center;
    }
			
    #ssclubfooter_1 {
    /* Here too! */
    }