Black Lives Matter. Please consider donating to Black Girls Code today.

Integrating javascript triggering html and css into a Dash plotly run in Python

I created a set of cards I am very proud of in Postman using a bit of javascript and a lot of html. How could I adapt or integrate it to be part of my Dash app developped in Python?

Here is teh code I made in the visualisation tool of Postman:

let template = `
    <link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    <style type="text/css">
        body { font-size: 12px; background: #eee; padding: 16px;}
        .card { border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,.15); -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.15); -moz-box-shadow: 0 4px 10px rgba(0,0,0,.15);}
        .card-topper { border-top-right-radius: 8px; border-top-left-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase;}
        .card-topper.micro { background-color: #173F5F; color: #ffffff;}
        .card-topper.planning { background-color: #ED553B; color: #ffffff;}
        .card-topper.large { background-color: #ED553B; color: #ffffff;}
        .card-topper.brewpub { background-color: #20639B; color: #ffffff;}
        .card-topper.regional { background-color: #F6D55C;}
        .card-topper.contract { background-color: #3CAEA3; color: #ffffff;}
        .card-topper.proprietor { background-color: #ED553B; color: #ffffff;} { background-color: #ED553B; color: #ffffff;}
    <div class="container-fluid">
        <div class="row">
            <div class="col mb-4">
        <div class="row">
            {{#each response}}
            <div class="col-sm-6 col-lg-4 col-xl-3 mb-5">
                <div class="card">
                    <div class="test card-topper card-img-top ">{{id}}</div>
                    <div class="card-body">

pm.visualizer.set(template, {
    // Pass the response body parsed as JSON as `data`
    response: pm.response.json()['items']

It draws the following set of card:

My Slack app is very simple so far:

from dash import Dash
from panels import cards

app = Dash(
        {'charset': 'utf-8'},{'name': 'viewport', 'content': 'width=device-width, initial-scale=1, shrink-to-fit=no'}
server = app.server

def cards_monitoring():
    data_mm = utils.load_topics(entity, start_date) # same data as the one managed above
    return html.Div([
             # What do I need to do here to get the same cards as above ?
    ], className='bare_container twelve columns')

app.layout = html.Div(
        # empty Div to trigger javascript file for graph resizing
        # Header
                        'width': '70%',
                        'font-size': '120%',
                        'font_family': 'cursive',
                    label='Card Monitoring',
                    style={'padding': '0','line-height': tab_height},selected_style={'padding': '0','line-height': tab_height},
            "border": "lightseagreen",
            "primary": "white",
            "background": "aliceblue"}

if __name__ == "__main__":

So what do I need to do in cards_monitoring() to get the same cards as above ? Can I integrate the code as it is with minor modification?

I used to use Dash.datatable but it’s not very nice