JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="atcb" style="display:none;">
{
  "name":"Reminder to star the add to calendar button repo",
  "description":"Check out the maybe easiest way to include add to calendar buttons to your website at:<br>→ [url]https://github.com/add2cal/add-to-calendar-button[/url]",
  "startDate":"2023-02-14",
  "endDate":"2023-02-14",
  "startTime":"10:15",
  "endTime":"23:30",
  "location":"World Wide Web",
  "options":[
    "Apple",
    "Google",
    "iCal",
    "Microsoft365",
    "MicrosoftTeams",
    "Outlook.com",
    "Yahoo"
  ],
  "timeZone":"Europe/Berlin",
  "iCalFileName":"Reminder-Event"
}
</div>

<div class="atcb-initialized" style="display: block;"><script type="application/ld+json">{
"@context":"https://schema.org",
"@type":"Event",
"name":"Reminder to star the add to calendar button repo",
"description":"Check out the maybe easiest way to include add to calendar buttons to your website at:
→ https://github.com/add2cal/add-to-calendar-button",
"startDate":"2023-02-14T10:15:00+01:00",
"duration":"13:15",
"location":"World Wide Web",
"endDate":"2023-02-14T23:30:00+01:00",
"image":[
"https://add-to-calendar-button.com/demo_assets/img/1x1.png",
"https://add-to-calendar-button.com/demo_assets/img/4x3.png",
"https://add-to-calendar-button.com/demo_assets/img/16x9.png"]
}</script><div class="atcb-button-wrapper atcb-light" style="--base-font-size-l:16px; --base-font-size-m:16px; --base-font-size-s:16px;"><button class="atcb-button" type="button" id="atcb-btn-1"><span class="atcb-icon"><span class="atcb-icon-trigger"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200.016"><path d="M132.829 7.699c0-4.248 4.199-7.699 9.391-7.699s9.391 3.451 9.391 7.699v33.724c0 4.248-4.199 7.699-9.391 7.699s-9.391-3.451-9.391-7.699zm-5.941 123.747c2.979 0 5.404 2.425 5.404 5.404s-2.425 5.404-5.404 5.404l-21.077-.065-.065 21.045c0 2.979-2.425 5.404-5.404 5.404s-5.404-2.425-5.404-5.404l.065-21.061-21.045-.081c-2.979 0-5.404-2.425-5.404-5.404s2.425-5.404...