JSON to Tailwind CSS Card Generator

Public

API Details

This API takes a JSON object as input and generates a Tailwind CSS-based information card to layout the data in a visually appealing manner. It processes the JSON structure and creates a responsive HTML snippet using Tailwind CSS classes, resulting in a clean and modern card design. The generated card can be easily integrated into web applications, dashboards, or any frontend project that utilizes Tailwind CSS. This API is particularly useful for developers and designers who want to quickly transform raw data into presentable UI components without writing custom CSS.

Request Schema

{
  "type": "object",
  "required": [
    "data"
  ],
  "properties": {
    "data": {
      "type": "object",
      "description": "The JSON object containing the information to be displayed in the card."
    },
    "options": {
      "type": "object",
      "properties": {
        "theme": {
          "enum": [
            "light",
            "dark"
          ],
          "type": "string",
          "default": "light",
          "description": "The color theme for the card."
        },
        "maxDepth": {
          "type": "integer",
          "default": 2,
          "maximum": 5,
          "minimum": 1,
          "description": "The maximum depth of nested objects to display in the card."
        }
      },
      "description": "Optional configuration for the card generation."
    }
  }
}

Response Schema

{
  "type": "object",
  "required": [
    "html"
  ],
  "properties": {
    "css": {
      "type": "string",
      "description": "Any additional custom CSS required for the card, if applicable."
    },
    "html": {
      "type": "string",
      "description": "The generated HTML snippet with Tailwind CSS classes for the information card."
    }
  }
}

API Metadata

655

Version

API Examples

Example Request

{
  "data": {
    "age": 30,
    "name": "John Doe",
    "skills": [
      "JavaScript",
      "React",
      "Node.js"
    ],
    "contact": {
      "email": "john@example.com",
      "phone": "+1 (555) 123-4567"
    },
    "occupation": "Software Developer"
  },
  "options": {
    "theme": "light",
    "maxDepth": 2
  }
}

Example Response

{
  "css": "",
  "html": "<div class=\"bg-white shadow-lg rounded-lg p-6 max-w-sm mx-auto\"> <h2 class=\"text-2xl font-bold mb-4 text-gray-800\">John Doe</h2> <p class=\"text-gray-600 mb-2\"><span class=\"font-semibold\">Age:</span> 30</p> <p class=\"text-gray-600 mb-2\"><span class=\"font-semibold\">Occupation:</span> Software Developer</p> <div class=\"mb-2\"> <span class=\"font-semibold text-gray-600\">Skills:</span> <ul class=\"list-disc list-inside ml-2 text-gray-600\"> <li>JavaScript</li> <li>React</li> <li>Node.js</li> </ul> </div> <div class=\"text-gray-600\"> <p class=\"font-semibold\">Contact:</p> <p class=\"ml-2\">Email: john@example.com</p> <p class=\"ml-2\">Phone: +1 (555) 123-4567</p> </div> </div>"
}