Basic project structure.

assets/style.css

@@ -0,0 +1,16 @@
+body {
+    background: black;
+}
+
+.magi {
+    display: flex;
+}
+
+.magi>.wise-man {
+    border: 3px solid #ff8d00;
+    padding: 50px;
+    margin: 10px;
+    font-family: Helvetica;
+    font-size: 3em;
+    font-weight: bold;
+}

components/magi.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default function Magi(props) {
+    const { setProps, children } = props;
+
+    return React.createElement("div", { className: "magi" }, children);
+}

components/wise_man.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+
+function useColor(status) {
+    if (status === 'yes')
+        return '#52e691';
+
+    if (status === 'no')
+        return '#a41413';
+
+    if (status === 'info')
+        return '#3caee0';
+
+    throw new Error(`Invalid status: ${status}`);
+}
+
+export default function WiseMan(props) {
+    const { setProps, name, order_number, status } = props;
+    const fullName = `${name} • ${order_number}`;
+    const color = useColor(status);
+
+    return React.createElement('div', { className: 'wise-man', style: { background: color } }, [
+        fullName
+    ])
+}

main.py

@@ -0,0 +1,20 @@
+from dash import Dash, Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+from dash_local_react_components import load_react_component
+
+app = Dash(__name__)
+
+Magi = load_react_component(app, 'components', 'magi.js')
+WiseMan = load_react_component(app, 'components', 'wise_man.js')
+
+app.layout = Magi(id='magi', children=[
+    WiseMan(id='melchior', name='MELCHIOR', order_number=1, status='yes'),
+    WiseMan(id='baltasar', name='BALTASAR', order_number=2, status='no'),
+    WiseMan(id='casper', name='CASPAR', order_number=3, status='info'),
+    dcc.Input(id='query', type='text'),
+    html.Button(id='send-button', children='Send')
+])
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

requirements.txt

@@ -0,0 +1,2 @@
+dash==2.9.3
+dash-local-react-components==1.3.0