How to create a block with HTML and CSS and javascript content.

Can somebody please show me a code example of how to create a block with javascript and css styles.

    editor.BlockManager.add('a_block', {
      label: 'Sample Block',
      content: 
          `<style>
              .sampleclass{
                padding:10px 15px;
              }
              .sampleclass2{
                opacity:0;
                visibility:hidden;
              }
              .sampleclass:hover > .sampleclass2{
                visibility:visible;
                opacity:1;
              }

              @media (max-width: 768px){
                .sampleclass{
                  width:100%;
                }
              }
          </style>
          <div class="samplecalss">Text<div class="sampleclass2"><div><a>A Link</a></div></div>
              <script>
                 console.log('hello world');
              </script>
          `,
      attributes: {
        title: 'A block'
      },    
  });

The main problem is that the js code is added right after the html rather than at the end of the file