Help with styling ... JSON vs HTML. Pics and Examples

I pulled some HTML elements off of

In this snippet, my group of questions are placed nicely within the white box (photo)

<!-- TECH-->
<div class="space-y-6">
    <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
        <div class="md:grid md:grid-cols-3 md:gap-6">
            <div class="md:col-span-1">
                <h3 class="text-lg font-bold leading-6 text-gray-900">Tech Info</h3>
                <p class="mt-1 text-sm text-gray-500">All the nerdy stuff</p>
            <div class="mt-5 md:mt-0 md:col-span-2">
                <form action="#" method="POST">
                        ....a lot of other stuff here

I’m not familiar with HTML at all. I see that the white rounded corner box is declared at the top of the html code.

In JSON, it seems, I put a "styleClasses": "some styling here" outside of a fields block like so:

"fields": [{
    "something": "somethingHere"
"styleClasses": "add my styling classes for the above fields here"

So … I’m thinking … if I just put what’s in the html <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6"> into the styleClasses like so:

"styleClasses": "bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6"

it would look the same.

But it looks like…

and it makes everything below it wonky.

Everything in my form has been HTML from up until now because I need to add a timePicker and can only find the FM Examples that are in JSON.

What should I do? Ditch all the HTML stuff and just go with JSON?

Some libraries can be used in HTML blocks. Can see this example using vue-datetime.

The required DOM insertions are:

<script src="" integrity="sha512-OyrI249ZRX2hY/1CAD+edQR90flhuXqYqjNYFJAiflsKsMxpUYg5kbDDAVA8Vp0HMlPG/aAl1tFASi1h4eRoQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" type="text/css" href="">
<script src=""></script>

Sorry also need this in your onAppLoad in your Global Action Scripts

Vue.component('vue-datetime', window.VueDatetime.Datetime);

I’m trying to replicate my HTML blocks into JSON blocks.

How do I move the text in the first column into the middle column?

Perhaps this may help with grid positioning: Grid Column Start / End - Tailwind CSS


So as I understand it …

I’m declaring a grid in my JSON block styleClasses, right?

 "styleClasses": "bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6 md:grid md:grid-cols-3 md:gap-6"

And then whatever is above this styleClasses and inside my fields block will be a part of this grid.

So, for each item, I need to tell it where to go within the grid?