JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Adaptive Card</title>
   <script src="https://unpkg.com/adaptivecards@latest/dist/adaptivecards.min.js"></script>
   <script type="text/javascript" src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>

   <style>
      /* Add your custom styles here */
      .adaptive-card-container {
         max-width: 400px;
         margin: 0 auto;
      }
      .adaptive-card-container {
   background: #f8f8f8;
   border: 1px solid #ddd;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.adaptive-card-container .ac-textBlock {
   font-family: Arial, sans-serif;
}

.adaptive-card-container .ac-container,
.adaptive-card-container .ac-columnSet,
.adaptive-card-container .ac-column {
   margin-top: 10px;
}


   </style>
</head>
<body>
   <div id="adaptiveCardContainer" class="adaptive-card-container"></div>
   <script>
      // Create an Adaptive Card instance
      const adaptiveCard = new AdaptiveCards.AdaptiveCard();

      // Set the JSON payload
      adaptiveCard.parse(
      {
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Publish Adaptive Card Schema"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "style": "Person",
                            "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
                            "altText": "Matt Hidinger",
                            "size": "Small"
                        }
                    ],
                    "width": "auto"
         ...