Retool Component: Attempting to have text overlayed over an image.

retool_component

// BEGIN MODEL TEXT
//  {  "displayText": "My headline", "SwiftTipImage": "https://cf.swifttips.co/st-17.jpg"   }
// END MODEL TEXT


// BEGIN RETOOL CUSTOM COMPONENT
// REMOVE COMMENTS WHEN LOADING

<style>
  body {
  	position:absolute;
    margin: 0;
  }
  .jam {
  	position:absolute;
    color: red !important;
    font-size:28pt;
    text-align:center;
    z-index:10;
    top:100px;
  }
</style>
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.production.min.js"></script>


<div id="react"></div>

<script type="text/babel">
  const { Button, Card, CardContent } = window["material-ui"];

  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <Card>
      <CardContent>
        <div>{model.displayText}</div>
        <img class="jam" width="368px" height="452px" src={model.SwiftTipImage}/>
         
      </CardContent>
    </Card>
  );

  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
  ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>